总结一下动态增加删除表格行的dom方法，下面是示例
<!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>demo</title>
<style type="text/css">
table td{border:1px solid #f20;}
</style>
</head>
<body>
<table id="t1">
<tbody id="ttt1">
<tr id="m1">
<td>1</td><td>内容1</td>
</tr>
<tr id="m2">
<td>2</td><td>内容2</td>
</tr>
<tr id="m3">
<td>3</td><td>内容3</td>
</tr>
<tr id="m4">
<td>4</td><td>内容4</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
//$("t1").firstChild.removeChild($("m2"));
var o=$("m1");
var o1=o.nextSibling;
var mx=document.createElement("tr");
mx.setAttribute("id","mx");
o.parentNode.insertBefore(mx,o1);
//这里一定要用o.parentNode.removeChild(o),如果直接$(parentNode.id).remove($(currentNodeid))这样FF下不兼容
o.parentNode.removeChild(o);
/*
方法1
var tO=document.createElement("td");
tO.innerHTML="x";
mx.appendChild(tO);
var tO=document.createElement("td");
tO.innerHTML="内容x";
mx.appendChild(tO);
*/
//方法2
var td1=document.createElement("td");
var text1=document.createTextNode("x");
td1.appendChild(text1);
mx.appendChild(td1);
var td2=document.createElement("td");
var text2=document.createTextNode("内容x");
td2.appendChild(text2);
mx.appendChild(td2);
</script>
</body>
</html>
最新评论