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;}//獲取tablevar 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='刪除' οnclick='del(this)' />";} //刪除某行 function del(p){p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement); }

?

轉載于:https://www.cnblogs.com/shoose/p/8393242.html

總結

以上是生活随笔為你收集整理的JS实现表格Table动态添加删除行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。