表格-对行列的操作

最新推荐文章于 2021-09-29 13:44:30 发布

可爱的丹丘

最新推荐文章于 2021-09-29 13:44:30 发布

阅读量302

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/danqiu2017/article/details/78854278

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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("请选择一个！");
    }
}