按删除键，一删删除一行_换了键盘后删除键删除一行-优快云博客

本文介绍了一种使用HTML、CSS和JavaScript实现表格动态增删行的方法。通过创建文本节点和表格元素，用户输入的数据可以实时添加到表格中，并且每个行末尾都有一个删除按钮，方便用户移除不需要的数据。此方法适用于需要用户交互和数据管理的Web应用程序。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>成绩</title>
    <style type="text/css">
        td{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    姓名：<input type="text"/>
    年龄：<input type="text"/>
    成绩：<input type="text"/>
    <input type="button" value="增加"/>
    <table id="box"></table>
    <script>

        var oBox = document.getElementById("box")
        var aInput = document.getElementsByTagName("input")
         //第一种
        //点击倒数第一个
        aInput[aInput.length-1].onclick = function(){
            //创建文本节点给td，创建td给tr
            var oTr = document.createElement("tr");
            for(var i=0;i<aInput.length-1;i++){
                var val = aInput[i].value;
                var oTxt = document.createTextNode(val)
                var oTd = document.createElement("td");
                oTd.appendChild(oTxt);
                oTr.appendChild(oTd);
            }
            //添加删除功能
            var oTd = document.createElement("td")
            oTd.innerHTML = "<span>删除</span>";
            oTr.appendChild(oTd);
            //最后把tr给table
            oBox.appendChild(oTr);
            //删除，删除span的父节点的父节点
            var aSpan = document.getElementsByTagName("span")
            for(var j=0;j<aSpan.length;j++){
                aSpan[j].onclick = function(){
                    oBox.removeChild(this.parentNode.parentNode)
                }
            }
        } 
        
        //第二种 一个一个加
        aInput[aInput.length-1].onclick = function(){
            //创建文本节点给td，创建td给tr
            var oTr = document.createElement("tr");
            for(var i=0;i<aInput.length-1;i++){
                var val = aInput[i].value;
                var oTxt = document.createTextNode(val)
                var oTd = document.createElement("td");
                oTd.appendChild(oTxt);
                oTr.appendChild(oTd);
            }

            var oTd = document.createElement("td")
            var oSpan = document.createElement("span")
            var oTxt = document.createTextNode("删除")
            oSpan.appendChild(oTxt);
            oTd.appendChild(oSpan);
            oTr.appendChild(oTd);
            oBox.appendChild(oTr);
            oSpan.onclick = function(){
                oBox.removeChild(oTr)
            }
        }
    </script>
</body>
</html>