JS实现表格Table动态添加删除行

Posted 2020-10-22 shuzu渊

1、页面内容

　　　　　　<table style="border:1px ; width:100%; height:160px">
                <THEAD>
                    <TR>
                    <TH height="10px">姓名</TH>
                    <TH height="10px">性别</TH>
                    <TH height="10px">部门</TH>
                    <TH height="10px">工资</TH>
                    <TH height="10px">操作</TH>
                    </TR>
                </THEAD>
                <tbody id="tbodyUser">    
                </tbody>
            </table>

 

2、JS代码

//动态提交值到表格
function add(){
    
  //根据获取下拉框的值
    var vname= $("#name").val();
　　var vsex= $("#sex").val();
　　var vdepartment= $("#department").val();
　　var vmoney= $("#money").val();

if(money== "" || money== undefined|| money== null){
        alert("未填写工资！");
        return false;
    }//获取table
    var tab = document.getElementById("tbodyUser");
　　//  创建元素
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");
    var td4 = document.createElement("td");
    var td5 = document.createElement("td");
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    tr.appendChild(td5);
    tab.appendChild(tr);
    td1.innerhtml = vname;
    td2.innerHTML = vsex;
    td3.innerHTML = vdepartment;
    td4.innerHTML = vmoney;
    td5.innerHTML = "<input type=‘button‘ value=‘删除‘ onclick=‘del(this)‘ />";

    
}
//删除某行
function del(p){
    p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
}