溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js中如何對表格進行逐行添加，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
關于js對表格進行逐行添加，今天抽空整理了一下：新建一個html文件（沒有編輯器的可以新建一個demo.txt文件，然后改后綴名為demo.html），把下面代碼全部貼進去即可。
功能包括：表格添加一行，表格刪除一行，表格遍歷取值等。
點擊說明：點擊添加按鈕，則表格添加一行，可進行錄入，刪除按鈕，可刪除當前行，其他行不影響。刪除或者添加，每行的的編號都會自動變化，套餐和價格是<input/>，內容是
<textarea></textarea>,點擊保存按鈕的時候，遍歷表格中所有行，把所有行的數據取出來彈框彈出展示，后期可根據需求傳遞到后臺進行處理。
效果圖：
源代碼：
<!--
Creator： WangPeng
CreateTime : 2018-01-25
去年今日此門中，人面桃花相映紅。
人面不知何處去，桃花依舊笑春風。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態增加表格</title>
</head>
<style>
td /*設置表格文字左右和上下居中對齊*/
{
vertical-align: middle;
text-align: center;
padding: 9px;
}
textarea{
min-height: 60px;
min-width: 200px;
}
</style>
<script type="text/javascript">
function del(obj){
if(document.getElementById('tbodyid').children.length>1){
var trid=obj.parentNode.parentNode.id;
var objtr=document.getElementById(trid);
document.getElementById('tbodyid').removeChild(objtr);
var tbody=document.getElementById('tbodyid');
var countchildren=tbody.childElementCount;
for (var i=0;i<countchildren;i++){
tbody.children[i].children[0].innerHTML=i+1;
}
}
else{
alert("請不要全部刪除");
}
}
function add(){
var trid = new Date().getTime();
var packageid=trid+'packageid';
var countid=trid+'countid';
var priceid=trid+'priceid';
var objtr=document.createElement('tr');
objtr.id=trid;
objtr.innerHTML="<td></td> " +
" <td><input id='"+trid+"packageid'></td> " +
" <td><textarea id='"+trid+"countid'></textarea></td> " +
" <td><input id='"+trid+"priceid'></td> " +
" <td><button type='button' onclick='del(this)'>刪除</button></td>";
document.getElementById("tbodyid").appendChild(objtr);
var tbodyobj=document.getElementById('tbodyid');
var countchildren=tbodyobj.childElementCount;
for (var i=0;i<countchildren;i++){
tbodyobj.children[i].children[0].innerHTML=i+1;
}
}
function save(){
var tbodyobj=document.getElementById('tbodyid');
var countchildren=tbodyobj.childElementCount;
var trid="";
var packageid="";
var countid="";
var priceid="";
var list=new Array();
for (var i=0;i<countchildren;i++){
trid=tbodyobj.children[i].id;
packageid=trid+"packageid";
countid=trid+"countid";
priceid=trid+"priceid";
var map={
"套餐":document.getElementById(packageid).value,
"內容":document.getElementById(countid).value,
"價格":document.getElementById(priceid).value
}
list.push(map);
}
console.log("list:",list);
alert(JSON.stringify(list));
}
</script>
<body>
<div>
<div >
<table border="1" bordercolor="#a0c6e5" align="center" width="100%">
<caption>動態增加表格</caption>
<thead>
<tr>
<th width="5% ">序號</th>
<th width="20%">套餐</th>
<th width="30%">內容</th>
<th width="10%">價格</th>
<th width="10%">操作</th>
</tr>
</thead>
<tbody id="tbodyid">
<tr id="123">
<td>1</td>
<td><input id="123packageid"></td>
<td><textarea id="123countid"></textarea></td>
<td><input id="123priceid"></td>
<td><button type="button" onclick='del(this)'>刪除</button></td>
</tr>
</tbody>
</table>
<button type="button" onclick='add()'>添加</button>
<button type="button" onclick='save()'>保存</button>
</div>
</div>
</body>
</html>js動態生成其他的也同理，可根據自己需要在指定位置創建自己所需要的元素。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“js中如何對表格進行逐行添加”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
