js实现表单内容的增加与删除操作（学生成绩的录入与删除）

采用node.removeChild(child)进行节点的删除操作，需要注意的是删除表格所在行，需删除所在行的tbody。采用创建document.createElement('tagname')和添加节点node.appendChild(child)将学生数据录入表格.代码如下:<!DOCTYPE html><html lang="zh-CN"><head>

258258ch

2420人浏览 · 2021-07-23 23:20:53

258258ch · 2021-07-23 23:20:53 发布

采用node.removeChild(child)进行节点的删除操作，需要注意的是删除表格所在行，需删除所在行的tbody。采用创建document.createElement('tagname')和添加节点node.appendChild(child)将学生数据录入表格.代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
table{
    width: 500px;
    margin: 100px auto;
    border-collapse: collapse;
    text-align: center;
}
td,th{
    border:1px solid #333;
}

thead tr{
    height: 40px;
    background-color: #ccc;
}


    </style>
</head>
<body>
    <table cellspacing="0">
    <thead>
<tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
    <th>操作</th>
   
</tr>

    </thead>

    <tbody>




    </tbody>

</table>

<script>
// 学生数据
var datas = [{
    name:'张三',
    subject:'java',
    score:85
},{
    name:'李四',
    subject:'java',
    score:99
},{
    name:'王武',
    subject:'java',
    score:92
}]

// 创建行到tbody
var tbody=document.querySelector('tbody');
for( var i=0;i<datas.length;i++){
    var tr=document.createElement('tr');
    tbody.appendChild(tr);
    for( var k in datas[i]){
        var td=document.createElement('td');
        // 把datas[i][k]赋值给td
        td.innerHTML = datas[i][k] 
        tr.appendChild(td);
    }

    // 创建操作行
    var td=document.createElement('td');
    td.innerHTML='<a href="javascript:;">删除</a>';
    tr.append(td);
}


// 删除操作

var as=document.querySelectorAll('a');
    for( var i=0;i<as.length;i++){
        as[i].onclick=function(){
            // 当第i行被选中后，执行删除节点操作，这里需要注意的是要删除a所在的爷爷，即tbody。根据node.removeChild(child)进行节点删除
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
</script>

</body>
</html>

实现效果如下：