表格增加一行/删除一行
Posted ermao的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表格增加一行/删除一行相关的知识，希望对你有一定的参考价值。
1,点击按钮，表格增加/删除一行，表格可编辑
html：
<div class="handle_tab_box clearfix">
<button class="removeRow_btn" onclick="delrow()">删除</button>
<button class="addRow_btn" onclick="addrow()">增加</button>
</div>
<div class="param_tablebox">
<table cellspacing="0" id="tb">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>是否为必须</th>
<th>示例值</th>
<th>更多限制</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</tbody>
</table>
</div>
//删除一行
function delrow() {
var i = tb.rows.length;
if (i == 1) {
return;
}
tb.deleteRow(i - 1);
}
//增加一行
function addrow() {
var tr = document.createElement(‘tr‘);
var cellsNum = tb.rows[0].cells.length;
for (var j = 0; j < cellsNum; j++) {
var td = document.createElement(‘td‘);
td.innerHTML = ‘<input type="text"/>‘;
tr.appendChild(td);
}
tb.tBodies[0].appendChild(tr);
}
CSS:
以上是关于表格增加一行/删除一行的主要内容，如果未能解决你的问题，请参考以下文章