js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）
生活随笔
收集整理的這篇文章主要介紹了
js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
*****************************************************************
js動態(tài)添加表的列,并在列中添加控件的方法<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("添加的內(nèi)容："));cell.appendChild(e);
}
</script>
</head>
<body><form><input type="button" οnclick="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("添加的內(nèi)容："));cell.appendChild(e);
}
</script>
</head>
<body><form><input type="button" οnclick="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>
方法二：(轉(zhuǎn))
<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" οnclick="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找到表格中的行號，刪除該行的方法（轉(zhuǎn)）<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;
}//根據(jù)得到的行對象得到所在的行數(shù)
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" οnclick="getRowNo(this)">getRowNo<td>
</tr>
<tr>
<td>B<input type="button" value="B" οnclick="delRow(this)">delRow<td>
</tr>
<tr>
<td>C<input type="button" value="C" οnclick="getRowNo(this)">getRowNo</td>
</tr>
<tr>
<td>D<input type="button" value="D" οnclick="getRowNo(this)">getRowNo</td>
</tr>
</table>
</body>
<html>
總結(jié)
以上是生活随笔為你收集整理的js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DOM的对象属性
- 下一篇： js改变classname 或添加cla