在table中动态增加或删除一行tr

最新推荐文章于 2024-07-10 16:18:57 发布

1988我想和这个世界谈谈

最新推荐文章于 2024-07-10 16:18:57 发布

阅读量2.9k

点赞数 2

分类专栏：前端table 文章标签： html jquery

本文链接：https://blog.csdn.net/malz_zh/article/details/112828568

版权

前端table 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

为table增加一行其实只需要在js中定义一个变量，让后将tr、td这些放到变量中，然后使用.append()方法追加到table中即可。

html页面：

 <table class="data-table data-table-border" id="onceFeeTableId">
                <thead>
                <tr>
                    <th>里程碑</th>
                    <th>计划完成时间</th>
                    <th>回款比例(%)</th>
                    <th>回款金额</th>
                    <th>说明</th>
                    <th>
                        <button class="btn btn-secondary  btn-main" onclick="addOneFeeTr('onceFeeTableId')" name="addOneFeeTr">+</button>
                    </th>
                </tr>
                </thead>
                <tbody id="oneFeeList">
                <tr>
                    <td>
                        <select class="form-control" name="markerName">
                            <option value="0">预付款</option>
                            <option value="1">到货</option>
                            <option value="2">初验</option>
                            <option value="3">终验</option>
                            <option value="4">自定义</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" class="form-control date-picker" name="onePlanRentDateName" id="onePlanRentDateName1" />
                    </td>
                    <td>
                        <input type="text" class="form-control" naem="paymentProportionName">
                    </td>
                    <td><input type="text" class="form-control"name = "paymentAmountName"></td>
                    <td><input type="text" class="form-control"name = "remarkName"></td>
                    <td><button class="btn btn-secondary  btn-main" onclick="delOneFeeTr($(this))" name="delOneFeeTr">-</button></td>
                </tr>
                </tbody>
            </table>

js:

//给表单增加一行
function addOneFeeTr(tab){
    wdatePickerCount+=1;
    alert(wdatePickerCount);
    var trHtml="<tr><td><select class='form-control' name='markerName'><option value='0'>预付款</option><option value='1'>到货</option><option value='2'>初验</option>"
        +"<option value='3'>终验</option><option value='4'>自定义</option></select></td><td><input type='text' class='form-control date-picker'name = 'onePlanRentDateName' />"
    +"</td><td><input type='text' class='form-control' name='paymentProportionName'></td><td><input type='text' class='form-control'name = 'paymentAmountName'></td>" +
        "<td><input type='text' class='form-control'name = 'remarkName'></td>" +
        "<td><button class='btn btn-secondary  btn-main' onclick='delOneFeeTr($(this))' name='delOneFeeTr'>-</button></td></tr>";
   $("#"+tab+"").append(trHtml);
}
//给表单删除一行
function delOneFeeTr(tr){
    var trCount = $("#onceFeeTableId").find("tr").length;
    //判断是否是最后一行
    if(trCount <= 2){
        alert("已是最后一行");
        return false;
    }else {
        $(tr).parent().parent().remove();
    }
}

界面：