cloneNode实现表格增加删除效果

查询窗口

function changeValue1(obj){
if(obj.value == 0){
document.getElementById("result").value = "f117";
}else {
document.getElementById("result").value = "gaofei";
}
}
function changeValue(obj){
if(obj.value == 0){
obj.parentElement.parentElement.cells[1].children[0].value = "f117";
}else if(obj.value == 1){
obj.parentElement.parentElement.cells[1].children[0].value = "gaofei";
}else
obj.parentElement.parentElement.cells[1].children[0].value = "";

}
function insertrow(){
var newrow = document.all.tbl.rows[0].cloneNode(true); //克隆一行
document.all("newTB").appendChild(newrow); //添加刚才克隆的一行
}

function delerow(){
var numrow = document.all("newTB").rows.length;
if (numrow == 0) {
alert("此行无法删除！");
return false;}
document.all("newTB").deleteRow(numrow-1);
}

查询条件

列表框 结果

人员编号
姓名

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript dom操作之cloneNode文本节点克隆使用技巧

    true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow

  • JavaScript 用cloneNode方法克隆节点的代码

    JavaScript 用cloneNode方法克隆节点的代码

    很多时候我们会用for 来生成多个结构相同的节点结构,这样我们需要写很多createElement.setAttribute.appendChild 等代码. 但其实我们只需要有一个html 的模板,就可以用cloneNode 方法对已有的节点进行克隆,包括其子节点. 以下是cloneNode 方法原型: newElement oldElement.cloneNode(bool deep); 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只

  • javascript cloneNode()方法的使用

    控件cloneNode()方法的使用 "; //用cloneNode永久克隆(true标示克隆) var NewSelect = document.getElementById("sexType").cloneNode(true); NewSelect.id = "sexType" + i; //td2的值为NewSelect td2.appendChild(NewSelect); td3.innerHTML = ''; } } // --> 姓名

  • IE下使用cloneNode注意事项分享

    cloneNode 是 HtmlElement 原型链上的方法,用于创建指定 dom 节点的拷贝,它接受一个布尔参数 include_all,如果 include_all 设置为 true,则副本会带有指定节点的所有子节点. 然而,script 标签也是 dom 节点,cloneNode 对其依然有效,经实测各浏览器(尤其是IE)对 cloneNode 执行结果表现不一致,主要现象为以下两种: IE,至少是 IE8 及以下,对某节点 cloneNode 时,如果该节点包含 script 节点,那

  • cloneNode实现表格增加删除效果

    查询窗口 function changeValue1(obj){ if(obj.value == 0){ document.getElementById("result").value = "f117"; }else { document.getElementById("result").value = "gaofei"; } } function changeValue(obj){ if(obj.value == 0){ o

  • Vue.js实现的表格增加删除demo示例

    Vue.js实现的表格增加删除demo示例

    本文实例讲述了Vue.js实现的表格增加删除demo.分享给大家供大家参考,具体如下: Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun,得到如下所示的运行效果: 具体代码如下: <!DOCTYP

  • vue element实现表格增加删除修改数据

    vue element实现表格增加删除修改数据

    本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q

  • javascript实现动态增加删除表格行(兼容IE/FF)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>动态增删表格行</title> <script language="JavaScript"> <!-- //author: 

  • jQuery实现的表格展开伸缩效果实例

    jQuery实现的表格展开伸缩效果实例

    本文实例讲述了jQuery实现的表格展开伸缩效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> table { border:0;border-collapse:collapse;} td {

  • JQuery实现动态表格点击按钮表格增加一行

    功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取 点击删除,自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { var tbl = document.all.ci; var rows = tbl.rows.length; var tr = tbl.insertRow(rows); var e_id = tr.insertCell(0); e_id.innerHTML = '<input type="t

  • 微信小程序实现列表项左滑删除效果

    微信小程序实现列表项左滑删除效果

    本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码,供大家参考,具体内容如下 效果 图片 WXML <view class="container"> <!-- 收货地址 --> <view class="address"> <view class="left"> <view class="icon"> <image src="../../i

  • 拖拽插件sortable.js实现el-table表格拖拽效果

    拖拽插件sortable.js实现el-table表格拖拽效果

    目录 问题描述 案例一 简单拖拽 代码附上 案例二 el-table表格拖拽 效果图 代码附上 问题描述 Sortable.js是一款优秀的js拖拽库,因为是原生js写的,所以性能不错,也支持移动端哦.本文举两个案例来学习一下. 案例一 简单拖拽 效果图 代码附上 关于理解看注释哦,运行的话复制粘贴即可 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <t

  • JavaScript实现表格快速变色效果代码

    JavaScript实现表格快速变色效果代码

    本文实例讲述了JavaScript实现表格快速变色效果的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现一个极酷的表格特效,表格快速的变色,形成色彩炫丽的效果,第一眼看上去,甚至不像是表格.读者可以通过本代码来研究一下Js的相关特性,了解一些JS编程技巧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-fast-cha-color-codes/ 具体代码如下: <HTML> <HEAD>

  • Javascript动态创建表格及删除行列的方法

    本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

随机推荐