用javascript删除当前行,添加行(示例代码)


Posted in Javascript onNovember 25, 2013

删除行

<script>   
  function   del(obj)   
  {   
        obj.parentNode.parentNode.removeNode(true);   
  }     
  </script>   
  <body>   
  <table>   
  <tr>
      <td>单元格1</td>
      <td><input   type=button   value="delete   this   row"   onclick="del(this)"></td>
   </tr>  
   <tr>
       <td>单元格2</td>
      <td><input   type=button   value="delete   this   row"   onclick="del(this)"></td>
   </tr> 
    <tr>
       <td>单元格3</td>
      <td><input   type=button   value="delete   this   row"   onclick="del(this)"></td>
   </tr> 
  </table>   
  </body>

添加行
<script> function uf_test(){
  //得到table对象
   var tbTable = document.getElementById("tb_test");
   //插入一行
   var trT = tbTable.insertRow();
   //得到上一行的td数
   var nRows = tbTable.rows[0].cells.length;
   //按上一行的td数循环进行插入td
   for(var i = 0; i < nRows ; i++){
    //创建td对象
    var tdT = document.createElement("TD");
    //给td对象赋值
    //tdT.innerHTML="sfsdf";  
    tdT.innerText="sfsdf"; 
    //把td添加到tr中 
    trT.appendChild(tdT);
   }
 }
</script>

<table id="tb_test" border="1">
 <tr>
 <td><input type="text"></td>
 </tr>
</table>
<input type="button" onclick="uf_test();" value="增加一行">
Javascript 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
JavaScript中DOM详解
Apr 13 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 #Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 #Javascript
js导入导出excel(实例代码)
Nov 25 #Javascript
用javascript添加控件自定义属性解析
Nov 25 #Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 #Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 #Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 #Javascript
You might like
PHP遍历二维数组的代码
2011/04/22 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
jquery remove方法应用详解
2012/11/22 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
vue中轮训器的使用
2019/01/27 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
python实现的重启关机程序实例
2014/08/21 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
极简的HTML5模版
2015/07/09 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
标准化管理实施方案
2014/02/25 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
财务会计实训报告
2014/11/05 职场文书
小孩不笨观后感
2015/06/03 职场文书
小学科学课教学反思
2016/02/23 职场文书