js实现表格添加数据

来源：互联网发布：ledrom编辑软件编辑：程序博客网时间：2024/05/01 10:14

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;}

0 0