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

 更新时间:2013年11月25日 10:21:48   作者:  
这篇文章主要介绍了用javascript删除当前行,添加行的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助

删除行

复制代码 代码如下:

<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数组中的map方法和filter方法

    javascript数组中的map方法和filter方法

    这篇文章主要介绍了javascript数组中的map方法和filter方法,文章内容介绍详细,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-03-03
  • ymPrompt的doHandler方法来实现获取子窗口返回值的方法

    ymPrompt的doHandler方法来实现获取子窗口返回值的方法

    今天在写页面时用到了ymPrompt的win方法来弹出一个窗口。由于要用到获取子窗口返回来的值判断是否刷新父窗口,在ymPrompt的组件Demo中一直没有找到合适的方法实现
    2010-06-06
  • JavaScript实现页面跳转的八种方式

    JavaScript实现页面跳转的八种方式

    这篇文章介绍了JavaScript实现页面跳转的八种方式,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • javascript实现图片轮换动作方法

    javascript实现图片轮换动作方法

    这篇文章主要介绍了javascript实现图片轮换动作方法,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • js获取鼠标位置杂谈附多浏览器兼容代码

    js获取鼠标位置杂谈附多浏览器兼容代码

    最近在搞一个AJAX的小功能,目的是用浮动div框显示当前鼠标下控件的详细信息,其中获得鼠标位置这块害得我走了很多冤枉路,因为压根没有想到我下面提到的第二点的区别,所以我的页面出来总是找不到我之前定义的那个div
    2008-11-11
  • JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)

    JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)

    随着移动互联网的不断普及,企业的网络宣传不仅只局限在PC端,还要在移动端发展。我们在自己的网站做了WAP手机完整之后,如果有用户通过手机访问我们的企业顶级域名网站,就要判断跳转到专为的WAP网站,下面小编给大家整理有关手机浏览器跳转WAP手机网站的相关内容
    2015-08-08
  • 基于JavaScript实现简单的轮播图

    基于JavaScript实现简单的轮播图

    这篇文章主要为大家详细介绍了基于JavaScript实现简单的轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • JS文件/图片从电脑里面拖拽到浏览器上传文件/图片

    JS文件/图片从电脑里面拖拽到浏览器上传文件/图片

    这篇文章主要介绍了JS文件/图片从电脑里面拖拽到浏览器上传文件/图片,需要的朋友可以参考下
    2017-03-03
  • js词法作用域与this实例详解

    js词法作用域与this实例详解

    作用域值一个变量的作用饿范围,下面这篇文章主要给大家介绍了关于js词法作用域与this的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • javascript模拟鼠标点击事件原理和实现方法

    javascript模拟鼠标点击事件原理和实现方法

    本文详细介绍了JS模拟鼠标点击事件的原理以及应用场景,并提供了模拟鼠标左键点击事件、右键点击事件、滚轮事件和移动事件的代码实现,了解JS模拟鼠标点击事件的原理和实现方法对于开发人员非常重要,这对于许多面向用户的web应用程序的开发和测试都具有很重要的意义
    2023-09-09

最新评论