[JS]动态添加删除ROW
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>增加Table行</title>
</head>
<script>
var count=3;
function CheckAll(sender)
{
var _array = document.getElementsByTagName("input");
for (var i=0;i<_array.length;i++)
{
var e = _array[i];
if (e.type == "checkbox")
{
if(e.id != "chkAll")
{
e.checked = sender.checked;
}
}
}
}
function AddRow(obj)
{
count++;
//添加一行
var newTr = testTbl.insertRow();
newTr.setAttribute("id","tr" + count.toString());
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box'+ count.toString() +'">';
newTd1.innerText= '第'+ count.toString() +'行';
}
function DelRow()
{
var tb = document.getElementById("testTbl");
if(tb.hasChildNodes)
{
var lastchild = tb.childNodes[0].childNodes[tb.childNodes[0].childNodes.length-1];
if(lastchild)
{
if(confirm("确认删除" + lastchild.childNodes[1].childNodes[0].nodeValue + "?"))
{
var removednode = lastchild.parentNode.removeChild(lastchild);
//alert(removednode.childNodes[1].childNodes[0].nodeValue);
return true;
}
else
{
return false;
}
}
}
}
function ShowCheckboxID()
{
var message = "";
var _array = document.getElementsByTagName("input");
for (var i=0;i<_array.length;i++)
{
var e = _array[i];
if (e.type == "checkbox")
{
//alert(e.id);
message += e.id + ",";
}
}
if(message.length > 0)
{
message = message.substr(0,message.length-1);
}
alert(message);
}
function ShowTRID()
{
var tb = document.getElementById("testTbl");
if(tb.hasChildNodes)
{
var message = "";
var array_tr = tb.childNodes[0].childNodes;
for(var i=0;i< array_tr.length;i++)
{
if(i==0)
{
message += array_tr[i].id;
}
else
{
message += ","+array_tr[i].id;
}
//alert(array_tr[i].id);
}
alert(message);
}
}
function SplitStr()
{
var str = document.getElementById("txt1").value;
var _array = str.split(",");
var result = "";
for(var i=0;i<_array.length;i++)
{
result += _array[i] +"\r\n";
}
if(result.length > 0)
{
result = result.substr(0,result.length-2);
}
alert(result);
}
</script>
<body>
<table id="testTbl" style="border: solid 1px #D2D2D2">
<tr id="tr0">
<td><input type=checkbox id="chkAll" οnclick="CheckAll(this);"></td>
<td>全选</td>
</tr>
<tr id="tr1">
<td ><input type=checkbox id="box1"></td>
<td>第1行</td>
</tr>
<tr id="tr2">
<td ><input type=checkbox id="box2"></td>
<td>第2行</td>
</tr>
<tr id="tr3">
<td ><input type=checkbox id="box3"></td>
<td>第3行</td>
</tr>
</table>
<br />
<input type="button" id="btnAdd" οnclick="AddRow();" value="Add Row" />
<input type="button" id="btnDel" οnclick="DelRow();" value="Del Row" />
<input type="button" id="btnShowCheckboxID" οnclick="ShowCheckboxID();" value="Show Checkbox ID" />
<input type="button" id="btnShowTRID" οnclick="ShowTRID();" value="Show TR ID" />
<hr size="1" />
<input type="text" id="txt1" value="She,sells,seashells,by,the,seashore" size="50" style="cursor:pointer" />
<input type="button" id="btnSplit" οnclick="SplitStr();" value="split string" />
</body>
</html>
转载于:https://www.cnblogs.com/RobotTech/archive/2007/09/12/890419.html
[JS]动态添加删除ROW相关推荐
- js删除与php后台交互,js动态添加删除,后台取数据(示例代码)_javascript技巧
环境描述:就像你一般在论坛上发表文章,可能带附件,附件的数量是你手动添加删除的!! /********************************************************* ...
- js动态添加,删除option及add的使用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- js动态添加删除节点
转载于:https://www.cnblogs.com/jiaobaobao/p/6762692.html
- jQuery使用toggleClass方法动态添加删除Class样式的方法
本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...
- 原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
- layui upload.render上传组件js动态添加html后再次渲染
页面效果 页面代码: <!-- 轮播图 --><input type="hidden" name="mcBaunell" id="m ...
- js动态添加样式和jQuery动态添加样式
0.style方式添加样式 DOM对象.style.color = 'red'DOM对象.style.display = 'block/none' //让元素显示/隐藏 1.js动态添加样式 1.添加 ...
- 动态添加/删除HTML元素
动态添加/删除HTML元素 <HTML> <HEAD> <title>动态添加/删除HTML元素</title> <style type=&quo ...
- js 动态 添加 tabel 表格
js 动态 添加 tabel 表格 代码 <!DOCTYPE html> <html><head><title> new document </t ...
- 【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
最新文章
- 排序算法四：归并排序
- ASP.NET-------字符串和字节数组转换
- julia const报错_我爱Julia之入门-004
- redhat enterprise linux 5 上安装openoffice3.0 1
- 7-6 列出连通集 (25 分)(详解)
- stm32编程入门_电子设计与单片机编程书籍资料推荐
- 计算机主机箱外部介绍图,电脑的主机结构是怎样的 电脑主机结构图【图文】...
- Linux学习十七、正规表达式练习题
- linux下java连接mysql_LinuxJava连接MySQL数据库
- 华为交换机开启snmp
- 怎么用html做随机颜色,JavaScript 实现网站标签随机颜色的方法
- 网络管理中的安全保障
- 洛克人html5,《洛克人Zero/Zx合集》：跳票冷饭，与预期有差但依旧很香
- 浪曦struts2学习笔记2
- oracle创建存储过程报错,oracle创建了存储过程，在PLSQL @路径 执行后报错
- 自组织神经网络：自组织特征映射SOM网络
- 头条号赚钱的4种办法，快看看你适合哪种？
- 两种典型频谱仪架构介绍
- 怎么关闭win10虚拟机服务器,大神为你win10系统彻底关闭退出vmware虚拟机的方案...
- 【JS基础】利用函数实现：用户输入一个数，判断是否是素数