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

JS實現表格Table動態添加刪除行