JavaScript实现添加、查找、删除元素


Posted in Javascript onJuly 02, 2015

代码很简单,这里就不多废话了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<style>
.reply {
  width: 500px;
  height: 100%;
  overflow: hidden;
  background-color:#CCC;
  margin-top: 10px;
}
.infoArea {
  width: 380px;
  height: 100%;
  overflow: hidden;
}
.words {
  width: 380px;
  height: auto;
  margin: 5px 0px;
  float: left;
  font-size: 14px;
}
.time {
  margin-left: 10px;
  margin-bottom: 3px;
  width: 150px;
  height: 20px;
  line-height: 20px;
  float: left;
  font-family: 楷体;
  font-size: 14px;
  color: #999;
}
.replyButton {
  width: 60px;
  height: 20px;
  float: left;
  margin-bottom: 10px;
}
.replyButton input {
  font-size: 12px;
}
#cancelButton {
  visibility: hidden;
}
</style>
</head>

<body>
<div class="reply">
 <div class="infoArea">
  <div class="words"><a href="">中央情报局</a>:中央情报局</div>
  <div class="time">2014年5月4日21:56</div>
  <div class="replyButton">
   <input type="button" id="submitButton" value="回复" onClick="showReplyArea(this)" />
  </div>
  <div class="replyButton">
   <input type="button" id="cancelButton" value="取消" onClick="hideReplyArea(this)" />
  </div>
 </div>
</div>
<script>
//显示文本框的函数
function showReplyArea(src)
{
  inputText = document.createElement("DIV");
  inputText.className = "inputText";
  inputText.style.width = '100%';
  inputText.style.height = '75px';
  inputText.style.margin = '3px 0';
  inputText.style.cssFloat = 'left';
  
  var grandfather = src.parentNode.parentNode.parentNode;
  grandfather.appendChild(inputText);
  
  form1 = document.createElement("FORM");
  form1.action = "";
  form1.method = "post";
  inputText.appendChild(form1);
  
  inputTextArea = document.createElement("TEXTAREA");
  inputTextArea.style.width = '380px';
  inputTextArea.style.height = '40px';
  inputTextArea.style.marginLeft = '60px';
  inputTextArea.style.marginTop = '3px';
  inputTextArea.style.cssFloat = 'left';
  inputTextArea.style.resize = 'none';
  
  textSubmit = document.createElement("INPUT");
  textSubmit.type = 'submit';
  textSubmit.value = '提交';
  textSubmit.style.marginLeft = '80px';
  textSubmit.style.cssFloat = 'left';
  
  form1.appendChild(inputTextArea);
  form1.appendChild(textSubmit);
  
  cancelButton = grandfather.getElementsByTagName("INPUT").item(1);
  cancelButton.style.visibility = 'visible';
  submitButton = src;
  submitButton.disabled = true;
}
//隐藏文本框的函数
function hideReplyArea(src)
{
  var grandfather = src.parentNode.parentNode.parentNode;
  var inputText = grandfather.getElementsByClassName('inputText').item(0);
  grandfather.removeChild(inputText);
  
  cancelButton = src;
  cancelButton.style.visibility = 'hidden';
  submitButton = grandfather.getElementsByTagName("INPUT").item(0);
  submitButton.disabled = false;
}

//下面为调试时测试用函数,做完后就没用了,但也是很经典的一段代码,就留在这里了。
function showNode()
{
  var i = 4;
  submitButton = document.getElementById('submitButton');
  i = submitButton.parentNode.parentNode.getElementsByTagName("INPUT").item(1).value;
  alert(i);
}
</script>
</body>
</html>

示例二:

window.onload = function(){ 
var gaga = document.getElementById( "gaga" ); 
addClass( gaga,"gaga1" ) 
addClass( gaga,"gaxx" ); 
removeClass( gaga,"gaga1" ) 
removeClass( gaga,"gaga" ) 
function hasClass( elements,cName ){ 
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 
}; 
function addClass( elements,cName ){ 
if( !hasClass( elements,cName ) ){ 
elements.className += " " + cName; 
}; 
}; 
function removeClass( elements,cName ){ 
if( hasClass( elements,cName ) ){ 
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换 
}; 
}; 
};

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
Node.js编码规范
Jul 14 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 #Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 #Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 #Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 #Javascript
javascript获取select值的方法分析
Jul 02 #Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 #Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 #Javascript
You might like
PHP中鲜为人知的10个函数
2014/02/28 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
农救科工作职责
2013/11/27 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
政治思想表现评语
2014/05/04 职场文书
会计电算化专业求职信
2014/06/10 职场文书
植树节标语
2014/06/27 职场文书
2014年业务工作总结
2014/11/17 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
晚会开场白和结束语
2015/05/29 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
深入理解go缓存库freecache的使用
2022/02/15 Golang