js实现表格添加数据

最新推荐文章于 2026-04-21 03:15:16 发布

原创最新推荐文章于 2026-04-21 03:15:16 发布 · 7.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一个简单的JavaScript示例，用于向HTML表格中添加和删除数据。通过表单输入用户ID、姓名和年龄，点击按钮即可将数据添加到表格中指定位置，并提供了删除功能。

js实现表格添加数据

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="util.js"></script>
    <script>
        function add(){
            var tab=$("#tab");
            var userId=$("#userId").value;
            var userName=$("#userName").value;
            var userAge=$("#userAge").value;

            var newTr=tab.insertRow(1);
            var idTd=newTr.insertCell(0);
            var nameTd=newTr.insertCell(1);
            var genderTd=newTr.insertCell(2);
            idTd.innerHTML=userId;
            nameTd.innerHTML=userName;
            genderTd.innerHTML=userAge;
        }
        function del(){
            var tab=$("#tab");
            tab.deleteRow(1);
        }

    </script>
</head>
<body>
    <table border="1px" id="tab">
        <tr id="tr1">
            <th width="250px">编号</th>
            <th width="250px">姓名</th>
            <th width="250px">性别</th>
        </tr>
        <tr id="tr2">
            <th width="250px">1</th>
            <th width="250px">zzzz</th>
            <th width="250px">男</th>
        </tr>
    </table>

    <div style="text-align: center">
        编号:<input type="text" id="userId" />
        姓名:<input type="text" id="userName" />
        年龄:<input type="text" id="userAge" />
    </div>
    <input type="button" value="添加" onclick="add()" />
    <input type="button" value="删除" onclick="del()" />
</body>
</html>

js代码：

/**
 *
 * @param idOrName  如果传入id  前面加上#   如果传入name  直接传入
 * @returns {*}  返回元素节点  如果没找到 返回null
 */
function $(idOrName){
    var obj=null;
    if(idOrName){
        if(idOrName.charAt(0)=="#"){
            obj=document.getElementById(idOrName.substring(1));
        }else{
            obj=document.getElementsByName(idOrName);
        }
    }
    return obj;
}
/**
 *
 * @param parentNode  父节点
 * @returns {Array}  所有的元素子节点
 */
function getChildNodes(parentNode){
    var childs=parentNode.childNodes;
    var newChilds=[];
    for(var i=0;i<childs.length;i++){
        if(childs[i].nodeType==1){
            newChilds.push(childs[i]);
        }
    }
    return newChilds;
}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   第一个元素节点
 */
function getFirstChild(parentNode){
    var firstChild=parentNode.firstChild;
    if(firstChild.nodeType==3){
        firstChild=firstChild.nextSibling;
    }
    return firstChild;

}
/**
 *
 * @param parentNode 父节点
 * @returns {*|Node}   最后一个元素节点
 */
function getLastChild(parentNode){
    var lastChild=parentNode.lastChild;
    if(lastChild.nodeType==3){
        lastChild=lastChild.previousSibling;
    }
    return lastChild;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回下一个兄弟元素节点
 */
function getNextSibling(node){
    var nextNode=node.nextSibling;
    if(nextNode.nodeType==3){
        nextNode=nextNode.nextSibling;
    }
    return nextNode;
}
/**
 *
 * @param node  元素节点
 * @returns {*|Node}  返回前一个兄弟元素节点
 */
function getPreviousSibling(node){
    var preNode=node.previousSibling;
    if(preNode.nodeType==3){
        preNode=preNode.previousSibling;
    }
    return preNode;
}