这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 js 实现对 table 的增加行和删除行的操作方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如下所示:
- <!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">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- </head>
- <body>
- <script type="text/javascript">
- //添加方法
- function addtr() {
- //var trid=0;
- var tab = document.getElementByIdx_x("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.getElementByIdx_x("signFrame");
- var row = document.getElementByIdx_x(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.getElementByIdx_x("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>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr id="trHeader">
- <td width="50px">
- 序号
- </td>
- <td width="170px">
- 时间
- </td>
- <td width="100px">
- 方式
- </td>
- <td>
- 备注
- </td>
- <td width="80px">
- 操作
- </td>
- </tr>
- <tr id="trHeader">
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr id="trHeader">
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr id="trHeader">
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- <tr id="trHeader">
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- </table>
- </body>
- </html>
以上就是小编为大家带来的 js 实现对 table 的增加行和删除行的操作方法全部内容了,希望大家多多支持 phperz~
来源: http://www.phperz.com/article/17/0529/331214.html