form行动态添加

最新推荐文章于 2025-04-04 19:00:00 发布

lianzhang925

最新推荐文章于 2025-04-04 19:00:00 发布

阅读量783

点赞数

分类专栏： js常用

本文链接：https://blog.youkuaiyun.com/lianzhang925/article/details/95892303

版权

js常用专栏收录该内容

2 篇文章

订阅专栏

form行动态添加

<!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>编辑表格数据</title>  
 
<script>
function addRow()
  {
     var root = document.getElementById("tbody")
     var allRows = root.getElementsByTagName('tr');
     var allCells = allRows[0].getElementsByTagName('td');
     var newRow = root.insertRow();
     var newCell0 = newRow.insertCell();
     var newCell1 = newRow.insertCell();
     var newCell2 = newRow.insertCell();
     var newCell3 = newRow.insertCell();
     newCell0.innerHTML = allCells[0].innerHTML;
     newCell1.innerHTML = allCells[1].innerHTML;
     newCell2.innerHTML = allCells[2].innerHTML;
     newCell3.innerHTML = allCells[3].innerHTML;

  }
  function removeRow(r)
  {
    var root = r.parentNode;
    root.deleteRow(r);
  }
</script>
</head>  
  
<body>  
<table>
  <tbody id="tbody">
    <tr>
        <td><select><option>hello</option><option>hi</option></select></td>
        <td><input type="text" value="enter you name here" /></td>
        <td><input type="text" value="text2"/></td>
        <td><input type="button" value="remove" onclick="removeRow(this.parentNode.parentNode)"/></td>
    </tr>
    </tbody>
  </table>
  <table><tr><td><input type="button" value="add" onclick="addRow()" /></td></tr></table>
 
</body>  
</html>