使用JavaScript动态删除单行表格的方法
最近帮同学做一个Ajax小控件,遇到了一个动态删除表格行的问题。经过反复试验后,以下代码在FF和IE(相当鄙视)中均有效:
页面部分:
<html><head><title>Insert title here</title><script type="text/javascript" src="a.js"></script></head><body><table id="tableI" cellpadding="1" cellspacing="1" border="1"><tr><td>0a</td><td>aa</td><td><button onclick="a(this)">bbb</button></tr><tr><td>1a</td><td>aa</td><td><button onclick="a(this)">bbb</button></tr><tr><td>2a</td><td>aa</td><td><button onclick="a(this)">bbb</button></tr><tr><td>3a</td><td>aa</td><td><button onclick="a(this)">bbb</button></tr><tr><td>4a</td><td>aa</td><td><button onclick="a(this)">bbb</button></tr><tr><td>5a</td><td>aa</td><td><button onclick="a(this)">bbb</button></tr><tr><td>6a</td><td>aa</td><td><button onclick="a(this)">bbb</button></tr></table></body></html>
var tableI;//要找到的tablevar trI;//要删除的trvar index;//tr所在table的index,从0开始function a(obj) {tableI = document.getElementById("tableI");//找到要删除行所在的tebletrI = obj.parentNode.parentNode;//我的button在tr下的td中,两次执行.parentNode操作,可以找到要删除的tr。index = trI.rowIndex;//要删除的tr所在table中的indextableI.deleteRow(index);//执行删除}