用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 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
微信小程序实现文件预览
Oct 22 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
如何通过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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
Python中functools模块函数解析
2017/03/12 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python之reload流程实例代码解析
2018/01/29 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
自动化专业个人求职信范文
2013/11/29 职场文书
2014学年自我鉴定
2014/02/23 职场文书
中考冲刺决心书
2014/03/11 职场文书
卖房协议书
2014/04/11 职场文书
初婚初育证明范本
2014/11/24 职场文书
2014年工人工作总结
2014/11/25 职场文书
2015年宣传工作总结
2015/04/08 职场文书
房贷工资证明范本
2015/06/12 职场文书
致接力运动员加油稿
2015/07/21 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
中学音乐课教学反思
2016/02/18 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js