表格增加一行/删除一行

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>

 

javascript:

 

//删除一行

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: