javaScript相关table行数增加与删除

1.在页面上写一个table标签,写一个按钮,响应单击事件,调用一个函数,每单击一次,为table增加一行数剧据,单元格中内容任意
2.上述table中生成的每行尾部单元格内加一个删除链接,当点击次此链接时删除当前行(提示,使用parentNode,行节点是单元格节点的父,单元格节点是链接节点的父)

你题目的解答代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>

</head>
<body>

<input type="text" id="text" value="添加的内容" /><input type="button" value="添加" onclick="addfunc();" /><br>
<table id="tab" border="1">
    <tr>
        <th>数据</th>
        <th>操作</th>
    </tr>
    
</table>

<script type="text/javascript">
function addfunc() {
    var tbody = document.querySelector("#tab tbody");
    var tr = document.createElement("tr");
    var text = document.getElementById("text").value;
    tr.innerHTML = '<td>'+text+'</td><td><input type="button" value="删除" onclick="delfunc(this);" /></td>';
    tbody.appendChild(tr);
    
}
function delfunc(t) {
    var tbody = document.querySelector("#tab tbody");
    tbody.removeChild(t.parentNode.parentNode);
    
}
</script>
</body>
</html>


如有帮助,望采纳!谢谢!

参考:

<!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>
  <title> 动态创建控件 </title>
    <script type="text/javascript">
        function add(){

            //alert(document.getElementById("p1").innerHTML);
            //alert(document.getElementById("div1").innerHTML);
            //alert(document.getElementById("item").innerHTML);
            //获取td标签
            var item = document.getElementById("item");

            //innerHTML属性可以获取非表单标签的文本内容
            //创建3个标签控件,br,file,button
            var br = document.createElement("br");
            var input = document.createElement("input");
            var btnDel = document.createElement("input");
            var input2 = document.createElement("input");
            //设置控件的名称和类型
            input2.type="text";
            input2.name="username";
            input.type="file";
            input.name="file2";
            btnDel.type="button";
            btnDel.value="删除";
            //为按钮增加单击事件(click)
            btnDel.onclick=function(){
                alert(input2.value);
                item.removeChild(br);
                item.removeChild(input2);
                item.removeChild(input);
                item.removeChild(btnDel);
            }
            //追加到td标签内部
            item.appendChild(br);
            item.appendChild(input2);
            item.appendChild(input);
            item.appendChild(btnDel);
        }
    </script>
 </head>

 <body>
  <h1>动态创建控件</h1>
  <hr>
  <table border="1" width="800">
    <tr>
        <td>文件上传</td>
        <td id="item"><input type="file" name="file1"><input type="button" name="btnAdd" value="添加" onclick="add();"></td>
    </tr>
  </table>

  <p id="p1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <div id="div1">我是div1标签内的文本内容</div>
 </body>
</html>