JavaScript 核心DOM与HTML DOM

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #html

这篇博客介绍了如何使用核心DOM对象和HTMLDOM来实现表格的动态填充和删除功能。通过监听按钮点击事件，获取文本框输入的内容，并创建新的表格行，包括ID、姓名和性别等信息，以及一个删除链接。当点击删除链接时，通过DOM操作移除相应的表格行。此外，还展示了另一种方式，通过修改`innerHTML`属性快速添加表格行。

案例1 实现表格的填充和删除

使用核心DOM对象来操作：关键知识点：node节点对于子父级的添加和删除

/*/!*添加人物*!/
    /!*给添加按钮创建点击任务*!/
    document.getElementById("btn_add").onclick=function () {
       /!*获取文本框里面输入的内容*!/
       var id_value = document.getElementById("id").value;
       var name_value = document.getElementById("name").value;
       var gender_value = document.getElementById("gender").value;
       /!*将获取的内容填入一个个的小格子里*!/
        var id_td = document.createElement("td");/!*创建一个小格*!/
        var idnode = document.createTextNode(id_value);/!*将获得的value值转换为字符串子节点*!/
        /!*因为字符串子节点内容属于小格子的子集，故将该子集填入小格中*!/
        id_td.appendChild(idnode)

        var name_td = document.createElement("td");/!*添加name格*!/
        var namenode = document.createTextNode(name_value);
        name_td.appendChild(namenode)/!*内容属于小格子的子集*!/

        var gender_td = document.createElement("td");/!*添加gender格*!/
        var gendernode = document.createTextNode(gender_value);
        gender_td.appendChild(gendernode)/!*内容属于小格子的子集*!/

        var a_td = document.createElement("td");/!*添加删除格*!/
        var a = document.createElement("a");/!*添加连接内容*!/
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","delTr(this)");
        var textnode = document.createTextNode("删除");
        a.appendChild(textnode);
        a_td.appendChild(a)

        /!*将小格子装入1行里面*!/
        var tr = document.createElement("tr");
        tr.appendChild(id_td);
        tr.appendChild(name_td);
        tr.appendChild(gender_td);
        tr.appendChild(a_td);
        /!*将这一行填入table里面*!/
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    
        function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
        }

使用HTML DOM来操作关键：利用innerHtml来对对象进行属性的编辑

document.getElementById("btn_add").onclick=function () {
    var id_value = document.getElementById("id").value;
    var name_value = document.getElementById("name").value;
    var gender_value = document.getElementById("gender").value;

    var table = document.getElementsByTagName("table")[0];
    /*+=表示在原有表格不动的基础上，添加一行*/
    table.innerHTML+=" <tr>\n" +
        "              <td>"+id_value+"</td>\n" +
        "              <td>"+name_value+"</td>\n" +
        "              <td>"+gender_value+"</td>\n" +
        "              <td><a href=\"javascript:void(0);\"  onclick=\"delTr(this);\">删除</a></td>\n" +
        "              </tr>";
}
function delTr(obj){
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);
}