js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)
2015-12-13 13:44
991 查看
***************************************************************** js动态添加表的列,并在列中添加控件的方法 <html> <head> <title>添加行</title> <script language="JavaScript"> function addrows() { var table=document.getElementById("t1"); var row; row=table.insertRow(); var cell = row.insertCell(0); var e = document.createElement("<input id=/"kjmc/" type=/"text/"></input>"); cell.appendChild(document.createTextNode("添加的内容:")); cell.appendChild(e); } </script> </head> <body> <form> <input type="button" onclick="addrows()" value="添加一行"> </form> <table id="t1" border="1"> </table> <body> </html> ****************************************************************** js在指定位置添加控件的方法 方法一: <html> <head> <title>添加行</title> <script language="JavaScript"> function addElement() { var cell=document.getElementById("22"); var e = document.createElement("<input id=/"kjmc/" type=/"text/"></input>"); cell.appendChild(document.createTextNode("添加的内容:")); cell.appendChild(e); } </script> </head> <body> <form> <input type="button" onclick="addElement()" value="添加控件到22"> </form> <table id="t1" border="5"> <tr> <td width="200" height="100">11</td> <td width="200" height="100">12</td> </tr> <tr> <td width="200" height="100">21</td> <td width="200" height="100" id="22">22</td> </tr> </table> <body> </html> 方法二:(转) <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> <table id="t1" border="1" width="300"> <tr> <td> </td> <td> </td> td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> <button id="b1" onclick="f1()">add new textbox</button> </body> </html> <script type="text/javascript"> function f1() { var _t = document.getElementById("t1"); var _i = document.createElement("input"); _i.type = "text"; _i.value = "i am a new textbox"; _t.rows[1].cells[1].appendChild(_i); } </script> ***************************************************************** js找到表格中的行号,删除该行的方法(转) <html> <head> <title>1</title> <script> //得到行对象 function getRowObj(obj) { var i = 0; while(obj.tagName.toLowerCase() != "tr"){ obj = obj.parentNode; if(obj.tagName.toLowerCase() == "table") return null; } return obj; } //根据得到的行对象得到所在的行数 function getRowNo(obj){ var trObj = getRowObj(obj); var trArr = trObj.parentNode.children; for(var trNo= 0; trNo < trArr.length; trNo++){ if(trObj == trObj.parentNode.children[trNo]){ alert(trNo+1); } } } //删除行 function delRow(obj){ var tr = this.getRowObj(obj); if(tr != null){ tr.parentNode.removeChild(tr); }else{ throw new Error("the given object is not contained by the table"); } } </script> </head> <body> <table border = "1"> <tr> <td>A<input type="button" value="A" onclick="getRowNo(this)">getRowNo<td> </tr> <tr> <td>B<input type="button" value="B" onclick="delRow(this)">delRow<td> </tr> <tr> <td>C<input type="button" value="C" onclick="getRowNo(this)">getRowNo</td> </tr> <tr> <td>D<input type="button" value="D" onclick="getRowNo(this)">getRowNo</td> </tr> </table> </body> <html>
相关文章推荐
- js在不刷新的情况下动态添加表格行
- JavaScript 模块的循环加载实现方法
- Javascript实用方法二
- js数据类型检测方法(总结)
- javascript返回上一级(页)的方式
- JavaScript:验证input[type=‘text’]输入框动态数据
- json中的值类型及输出对象的所有名称和对应的值
- js-window对象的方法和属性资料
- javascript日期验证之输入日期大于等于当前日期
- JS+HTML5的Canvas画图模拟太阳系运转
- Javascript学习笔记-2(对象、函数)
- 详解JavaScript正则表达式之RegExp对象
- this详解:JAVASCRIPT中的this到底是谁?
- this详解:JAVASCRIPT中的this到底是谁?
- [ExtJs] ExtJs4.2 数据模型Ext.data.Model学习
- Javascript学习笔记-1(类型、变量、for语句、数组、字符串、原型对象、函数对象)
- javascript自执行函数
- this详解:JAVASCRIPT中的this到底是谁?
- js继承的实现
- this详解:JAVASCRIPT中的this到底是谁?