日期:2014-05-16  浏览次数:20448 次

使用JS动态添加和减少指定行(简洁完整代码通过Firefox 测试)
使用JS动态添加和减少指定行
  完整代码
  以下代码经过Firefox 测试通过


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
  <table border="0" cellspacing="0" cellpadding="0"> 
  <tbody id="tbody">
    <tr> 
      <td><input type="text" name="text1" /></td> 
      <td><input type="text" name="text2" /></td> 
      <td><select name="select"> 
        <option>item1</option> 
        <option>item2</option> 
        <option>item3</option> 
        <option>item4</option> 
        <option>item5</option>
      </select></td>
      <td><input type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)"></td>
    </tr></tbody>
  </table>
  <input name="button" type="button" value="Add row" onclick="addRow()">
  <script>
	function addRow()
	{ 
		var root = document.getElementById("tbody");
		var allRows = root.getElementsByTagName('tr');
		var cRow = allRows[0].cloneNode(true)
		root.appendChild(cRow);
	} 
	function removeRow(r)
	{
		var root = r.parentNode;
		var allRows = root.getElementsByTagName('tr')
		if(allRows.length>1)
			root.removeChild(r);
		else
			alert("only one row left, you not need to remove it.");
	}
  </script>
 </body>
</html>