<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script type="text/javascript"> //添加方法 function addtr() { //var trid=0; var tab=document.getElementById("signFrame"); //添加行 var newTR = tab.insertRow(tab.rows.length); alert(tab.rows.length); //trid++; //获取序号=行索引 var xuhao=newTR.rowIndex.toString(); alert(xuhao); newTR.id = "tr" + xuhao; //添加列:序号 var newNameTD=newTR.insertCell(0); //添加列内容 newNameTD.innerHTML = xuhao; //添加列:日期 var newNameTD=newTR.insertCell(1); //添加列内容 newNameTD.innerHTML = "<input name='time" + xuhao + "' id='time" + xuhao + " size='19' onmouseover='this.style.backgroundColor=#6298E1;this.style.color=#000000;' onmouseout='this.style.backgroundColor=#6298E1;this.style.color=#000000;' />"; //添加列:方式 var newEmailTD=newTR.insertCell(2); //添加列内容 newEmailTD.innerHTML = "<select style='width:70px;' name='way" + xuhao + "' id='way" + xuhao + "'><option value='电话'>电话</option><option value='QQ'>QQ</option> </select>"; //添加列:备注 var newTelTD=newTR.insertCell(3); //添加列内容 newTelTD.innerHTML = "<input size='60' name='remark" + xuhao + "' id='remark" + xuhao + "' type='text' onclick='showid(this)' />"; //添加列:删除按钮 var newDeleteTD=newTR.insertCell(4); //添加列内容 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"deltr('tr" + xuhao + "')\">删除</a></div>"; } </script> <script type="text/javascript"> //删除其中一行 function deltr(trid) { //alert(trid); var tab=document.getElementById("signFrame"); var row=document.getElementById(trid); var index=row.rowIndex;//rowIndex属性为tr的索引值,从0开始 tab.deleteRow(index); //从table中删除 //重新排列序号,如果没有序号,这一步省略 var nextid; for(i=index;i<tab.rows.length;i++){ tab.rows[i].cells[0].innerHTML = i.toString(); nextid=i+1; remark=document.getElementById("remark"+nextid); remark.id="remark"; } } </script> <script type="text/javascript"> function showid(txt) {alert(txt.id); } </script> <body> <input type="button" value="保存" onclick="addtr()" /> <table border="1px" width="70%" id="signFrame"> <tr id="trHeader"> <td width="50px">序号</td> <td width="170px">时间</td> <td width="100px">方式</td> <td>备注</td> <td width="80px">操作</td> </tr> </table> </body> </html>
删除行:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script> $(function(){ $("#getAtr").click(function(){ $str=''; $str+="<tr align='center'>"; $str+="<td><input type='text' name='advTitle[]'/></td>"; $str+="<td><input type='file' name='img[]' /></td>"; $str+="<td><input type='text' name='advContent[]' /></td>"; $str+="<td><input type='text' name='advSource[]' /></td>"; $str+="<td><input type='text' name='advAuthor[]' /></td>"; $str+="<td><input type='text' name='advPosition[]' /></td>"; $str+="<td onClick='getDel(this)'><a href='#'>删除追加</a></td>"; $str+="</tr>"; $("#addTr").append($str); }); }); function getDel(k){ $(k).parent().remove(); } </script>
相关推荐
javascript table 增加删除行
使用javascript实现table动态增加删除行列。
用js实现对table添加行、删除行、复制行的操作。
对表格的行和列进行插入/删除,并对每行添加行号
下面小编就为大家带来一篇js实现对table的增加行和删除行的操作方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
非常漂亮的js操作table行代码函数。比较方便
1.表格动态添加,也可删除 添加行数 保存 <el data=tableData xss=removed> 书名> <e
本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table:...
主要介绍了Js动态添加删除Table行的具体实现,需要的朋友可以参考下
主要介绍了js操作table元素实现表格行列新增、删除技巧,以实例形式分析总结了JavaScript针对table表格进行行列的增加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
纯js的树形菜单(添加删除节点)动态添加父节点子节点。jquery实现
html: 代码如下: <table id=’wifi_clients_table’ xss=removed class=”table> <thead> ”success”> 序号</th> 机器名</th> <th>IP地址</th> <th>MAC地址</th> 上行/下行速率</th> </tr> </thead>...</table> js:
本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下: 最近做一个投票管理的模块,需要添加问题选项,为了方便,就简单地实现了表格行的添加、删除。 注:需引入jquery.js 先上效果图:...
主要介绍了JavaScript实现动态添加,删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
1.完整的包命名空间 2.自定义header footer 3.动态添加节点/动态删除节点/动态...15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现
实现在table表格的指定行后增加新行 删除新行 并利用收回及展开处理了由于动态增加行而占用大量页面空间的问题 代码有注释 易懂 希望能对大家有所帮助