js实现表格动态增加一行问题
现在每次增加行的时候总在插在最前面一行，js的代码怎样改一下让它增加一行的时候插入在最后一行
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{background:#FFFFFF;}
</style>
<script type="text/javascript">
function add(){
var oTr = document.getElementById("addtr").rows[1];
var newTr = oTr.cloneNode(true);
document.getElementById("addtr").getElementsByTagName("tbody")[0].appendChild(newTr);
newTr.cells[0].firstChild.value = newTr.rowIndex;
document.getElementById("b1").disabled = newTr.rowIndex ==5 ;
}
</script>
</head>
<body>
<input type="button" id="b1" value="添加一行" onclick="add()" />
<table width="700" border="0" cellspacing="0" cellpadding="0" id="addtr">
<tr>
<td height="30" align="center" bgcolor="#CCCCCC">ID</td>
<td align="center" bgcolor="#CCCCCC">Username</td>
<td align="center" bgcolor="#CCCCCC">Usertype</td>
<td align="center" bgcolor="#CCCCCC">Other</td>
<td align="center" bgcolor="#CCCCCC">我有添加了一行</td>
</tr>
<tr>
<td height="30" align="center"><input type="text" size="2" value="1" /></td>
<td align="center"><input id="us" type="text" name="username" /></td>
<td align="center">
<select name="type" id="sel">
<option value="1">Administrator</option>
</select>
</td>
<td align="center"><input type="text" name="username2" id="us2" /></td>
<td align="center"><input type="text" name="ok" id="ok"/></td>
</tr>
</table>
</body>
你是想把添加的行插入在最后一行之前吗? 那么要使用insertBefore方法. 这样函数add变成如下这个样子(使用了tb变量保存表格对象):
function add(){
var tb = document.getElementById("addtr");
var oTr = tb.rows[1];
var newTr = oTr.cloneNode(true);
tb.getElementsByTagName("tbody")[0].insertBefore(newTr, tb.rows[tb.rows.length - 1]);
newTr.cells[0].firstChild.value = newTr.rowIndex;
document.getElementById("b1").disabled = newTr.rowIndex ==5 ;
}
