1、页面
<table id="myTable" class="table table-striped table-bordered table-hover"
style="margin-top: 10px;font-size: 13px">
<thead>
<tr>
<td></td>
<td style="width: 15%">每日计划</td>
</tr>
</thead>
<tbody id="myTbody">
<tr>
<td><input type="checkbox" name="orderNumber"/></td>
<td><textarea rows="4" name="plan" class="form-control" style="resize: none"></textarea>
</td>
</tr>
<tr id="temp">
<td></td>
<td><textarea rows="4" name="plan" class="form-control" style="resize: none" placeholder="临时追加:"></textarea>
</td>
</tr>
<tr>
<td colspan="2" class="td_css">
<button type="button" class="btn btn-warning btn-sm" onclick="addRow()">增加一行</button>
<button type="button" class="btn btn-danger btn-sm" onclick="delRow()">删除一行</button>
</td>
</tr>
</tbody>
</table>
<table id="clone" style="display: none;">
<tr>
<td><input type="checkbox" name="orderNumber"/></td>
<td><textarea rows="4" name="plan" class="form-control" style="resize: none"></textarea>
</td>
</tr>
</table>
2、js方法
//增加一行
function addRow() {
var myTbody = document.getElementById("myTbody");
var oldRow=document.getElementById("clone").rows[0];//访问复制的行
var newRow=oldRow.cloneNode(true);//复制一行
var row=document.getElementById("temp");
myTbody.insertBefore(newRow,row);
}
Tip:oldRow.cloneNode(true)必须有,如果直接使用myTbody.insertBefore(oldRow,row)就相当于将<table id="clone">里的<tr>这一行移动到row的前面,clone里就没有这一行了。
//删除一行
function delRow() {
var checkbox = $("input[name='orderNumber']:checked");
if(checkbox.length==1){
var tr=checkbox[0].parentNode.parentNode;
var myTbody = document.getElementById("myTbody");
myTbody.removeChild(tr); //删除行
}else{
alert("请选择一个!");
}
}
表格-对行列的操作
最新推荐文章于 2021-09-29 13:44:30 发布