动态增删表格行(纯JS写法)

动态增删表格行(纯JS写法) 归档

进行表格下行的动态增加与删除

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格动态增删样例</title>
<script type="text/javascript" src="dynamic_table.js"></script>
</head> <body>
<TABLE id="actiHotTable" style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=80% align=center border=1> <THEAD> <TR> <TH style="width:2%;" title="序号">序号</TH> <TH style="width:2%;" title="营销活动名称">营销活动名称</TH> <TH style="width:2%;" title=接入号码>标签</TH> <TH style="width:2%;" title=对象名称>操作</TH> </TR> </THEAD> <tbody> <TR> <TD><input TYPE="text" NAME="hotSeq" ID="hotSeq" readonly="readonly" /></TD> <TD><input TYPE="input" NAME="actionName" value="" /> <input TYPE="hidden" NAME="actionId" value=""  /> <button type="button" id="chooseAction" name="chooseAction"  <TD> <select name="hotType"> <option value="NEW">NEW</option> <option value="HOT">HOT</option> </select> </TD> <TD> <button type="button" id="add_hot_config" name="add_hot_config"  <button type="button" id="del_hot_config" name="del_hot_config"  </TD> </TR> </tbody> </TABLE> </body>
</html>

dynamic_table.js
dynamic_table.js[javascript] view plaincopyprint?/*** 增加一行* @param obj*/
function addRow(obj){ var appendRow = obj.parentNode.parentNode; //把其中的营销活动名称清除  var clonedRow=appendRow.cloneNode(true); var inputs=clonedRow.cells[1].getElementsByTagName("INPUT"); for(var i=0;i<inputs.length;i++){ inputs[i].value=''; } //obj.parentNode.parentNode.parentNode.appendChild(clonedRow);//加在table后面  //指定加在table的指定行的后面  obj.parentNode.parentNode.parentNode.insertBefore(clonedRow,appendRow.nextSibling); reSort();
} /*** 删除一行* @param obj*/
function deleteRow(obj){ var tableRowLenth=obj.parentNode.parentNode.parentNode.rows.length; if(tableRowLenth>1){ var delNode=obj.parentNode.parentNode; delNode.parentNode.removeChild(obj.parentNode.parentNode);  }else{ alert('没有可删除的行！'); } reSort();
} /*** 进行排序*/
function reSort(){ var oTBODY  = document.getElementById('actiHotTable').tBodies.item(0); var rowsCount =  oTBODY.rows.length; for(var i=0;i<rowsCount;i++){ oTBODY.rows[i].cells[0].childNodes[0].value=i+1; // alert(oTBODY.rows[i].cells[0].childNodes[0].id);  // oTBODY.rows[i].cells[0].childNodes[0].id='sortId_'+i;  // alert(oTBODY.rows[i].cells[0].childNodes[0].id);  }
} /*** 进行选择* @param obj*/
function chooseActiAction(obj){ var url='choose.jsp'; var returnValue = window.showModalDialog(url,'target',"scroll:yes;resizable:no;status:no;help:no;dialogHeight:350px;dialogWidth:800px"); if(typeof(returnValue)=='undefined'){ return; } var returnArray= returnValue.split(","); if(returnArray.length>1){ var tags=obj.parentNode.getElementsByTagName("INPUT"); tags[0].value=returnArray[0]; tags[1].value=returnArray[1]; } }

转载于:https://blog.51cto.com/andysu/1228508

动态增删表格行(纯JS写法)相关推荐

three.js script vertex和fragment在react中使用/纯js写法
html原生script写法 <script id="vs" type="x-shader/x-vertex"> -- </script> ...
js如何动态添加表格行
一.总结方法一:添加可通过在table的innerHTML属性中添加tr和td来实现方法二:通过table的属性insertRow(),deleteRow()来实现方法一和方法二对比: 二.js ...
html中table表格分页,纯JS实现表格分页
思路: 1.讲表格内容存入一个变量 2.通过点击按钮从表格中调取数据 3.讲调取的数据填入表格中表格分页 html,body { margin:0; height:100%; } .barcon { ...
php 动态添加表格行,jQuery给html表格动态添加行方法总结
这次给大家带来jQuery给html表格动态添加行方法总结,jQuery给html表格动态添加行的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例讲述了jQuery实现html表格动态添加新 ...
HTML表格行上下移动,键盘上下键移动选择table表格行的js代码_javascript技巧
//这是要操作的表格: 这是第一行这是第二行这是第三行这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'sh ...
jquery对表格行列的操作-jquery动态增加表格行或者列
jquery对表格的操作是老生常谈的问题.最近项目中用到了,今天在这里分享一下! 效果大体如下: 分享一下代码吧! html <div class="table-responsive& ...
html指定表格行列书,js动态生成指定行数的表格
下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值动态生成表格行效果如下图所示: 2.header中添加js代码 function table() ...
JavaScript学习笔记：动态添加与删除表格行
文章目录一.添加表格行与单元格二.动态删除表格行与单元格三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
js动态修改表格数据
js动态修改表格数据使用js在表格个内进行动态修改,需要再点击每一个td的时候在每个td里动态的添加一个input文本框然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框 ...

动态增删表格行(纯JS写法)

动态增删表格行(纯JS写法)相关推荐

最新文章

热门文章