js动态为talbe添加行效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title>js动态为talbe 添加行效果</title>
<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);
 document.getElementById("b1").disabled = newTr.rowIndex ==5 ;//最多添加5行
}
</script>
</head>
<body>
<input type="button" id="b1" value="添加一行" onclick="add()" />
<table id="addtr">
  <tr>
    <td>ID</td>
    <td>Username</td>
    <td>Nickname</td>
    <td>Other</td>
  </tr>
  <tr>
    <td><input type="text" name="ID"/></td>
    <td><input type="text" name="username"/></td>
    <td><input type="text" name="Nickname"/></td>
    <td><input type="text" name="Other"/></td>
  </tr>
</table>
</body>
</html>

你可能感兴趣的:(js动态为talbe添加行效果)