用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="增加一行">

赞 (0)

相关推荐

  • js实现动态添加、删除行、onkeyup表格求和示例

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "

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

    删除行 复制代码 代码如下: <script>     function   del(obj)     {           obj.parentNode.parentNode.removeNode(true);     }       </script>     <body>     <table>     <tr>      <td>单元格1</td>      <td><input   type=

  • JavaScript中removeChild 方法开发示例代码

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • JavaScript 实现下雪特效的示例代码

    JavaScript 实现下雪特效的示例代码

    直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下雪效果实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <style type=

  • JAVA 添加、修改和删除PDF书签的示例代码

    当阅读篇幅较长的PDF文档时,为方便我们再次阅读时快速定位到上一次的阅读位置,可以插入一个书签进行标记:此外,对于文档中已有的书签,我们也可以根据需要进行修改或者删除等操作.本篇文章将通过Java编程来展示如何添加.修改以及删除PDF书签. 工具使用: •Free Spire.Pdf for Java 2.4.4 (免费版) •IntelliJ IDEA Jar包导入: 方式一:首先,从官网获取Free Spire.PDF for Java之后解压,以下是三种在IDEA中快速打开Project

  • Java 添加和删除PDF图层的示例代码

    在PDF文档中,图层可以使部分内容选择性地被隐藏或显示.通过添加图层,我们可以将文本.图片.表格等元素精确定位于页面指定位置,并可将这些元素进行叠放.组合形成页面的最终效果.本文将介绍如何使用Spire.PDF for Java来添加和删除PDF图层. 使用工具: Free Spire.PDF for Java (免费版) Jar文件获取及导入: 方法1:通过官方网站 下载获取jar包.解压后将lib文件夹下的Spire.Pdf.jar文件导入Java程序.(如下图) 方法2:通过maven仓库

  • 原生JavaScript实现弹幕组件的示例代码

    前言 如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类.这个类希望有如下属性和实例方法: 属性 el容器节点的选择器,容器节点应为绝对定位,设置好宽高 height 每条弹幕的高度 mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满 speed弹幕划过屏幕的时间 gapWidth后一条弹幕与前一条弹幕的距离 方法 pushData 添加弹幕元数据 addData持续加入弹幕 start开始调度弹幕 stop停止弹幕 r

  • JavaScript封装单向链表的示例代码

    使用JavaScript封装单向链表: 1. 封装LinkList的类,用于表示我们的链表结构. 2. 在LinkList类中有一个Node类,用于封装每一个节点上的信息(data与next). 3. 在链表中保存两个属性,一个是链表的长度,一个是链表中的第一个节点. 4.封装一些链表的常用方法: append(element):想列表尾部添加一个新的项: insert(position,element):向列表的特定位置插入一个新的项: get(position):获取对应位置的元素: ind

  • JavaScript实现跟随广告的示例代码

    JavaScript实现跟随广告的示例代码

    浮动广告是目前网站很常见的一种广告形式,浮动广告能实时跟随用户的浏览,有效的传达产品要表达的意思,达到很好的传播效果.那么浮动广告是怎么实现的呢,其实实现浮动广告并不难,具体如下: * { margin: 0; padding: 0; } img { position: absolute; left: 0; } p { text-align: center; line-height: 40px; } <img src="images/left_ad.png" alt="

  • JavaScript实现流星雨效果的示例代码

    JavaScript实现流星雨效果的示例代码

    目录 演示 技术栈 源码 首先建立星星对象 让星星闪亮起来 创建流星雨对象 让流星动起来 演示 上一次做了一个雨滴的动画,顺着这种思维正好可以改成流星雨,嘿嘿我真是一个小机灵. 技术栈 还是先建立画布 <body> <canvas id="stars"></canvas> </body> 画布标签我昨天讲过了.不知道的小伙伴可以去看看. 源码 首先建立星星对象 //创建一个星星对象 var Star = function (){ this

  • 原生JavaScript实现模态框的示例代码

    原生JavaScript实现模态框的示例代码

    目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&

随机推荐

其他