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 相关文章推荐
javascript模拟枚举的简单实例
Mar 06 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
vue页面更新patch的实现示例
Mar 25 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
PHP7修改的函数
2021/03/09 PHP
js一组验证函数
2008/12/20 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
Python中join函数简单代码示例
2018/01/09 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python错误的处理方法
2020/06/23 Python
python基于opencv 实现图像时钟
2021/01/04 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
小学信息技术教学反思
2014/02/10 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
会计工作岗位职责
2015/02/03 职场文书
解除处分决定书
2015/06/25 职场文书