<tbody id="new">
<tr><td>a</td><td>1</td></tr>
<tr><td>b</td><td>2</td></tr>
<tr><td>c</td><td>3</td></tr>
</tbody>
</table>
<script type="text/javascript">
var table = document.getElementById("new")
// 增加行
var newTR= document.createElement("tr")
var newTD1 = document.createElement("td")
var newText1 = document.createTextNode("d")
var newTD2 = document.createElement("td")
var newText2 = document.createTextNode("4")
newTD1.appendChild(newText1)
newTD2.appendChild(newText2)
newTR.appendChild(newTD1)
newTR.appendChild(newTD2)
table.appendChild(newTR)
//增加列
var tr = table.getElementsByTagName("tr")
for(var i=0i<tr.lengthi++) {
var newTD = document.createElement("td")
var newText = document.createTextNode(i)
newTD.appendChild(newText)
tr[i].appendChild(newTD)
}
</script>
表格部分代码如下:<table id="testTbl" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2"></td>
<td id="b">第二行</td>
</tr>
<tr bgcolor=#0000FF>
<td width=6%><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
动态添加表行的javascript函数如下:
function addRow(){
//添加一行
var newTr = testTbl.insertRow()
//添加两列
var newTd0 = newTr.insertCell()
var newTd1 = newTr.insertCell()
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4">'
newTd2.innerText= '新加行'
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)