table 增加、删除一行

来源：互联网发布：java效率最高的排序编辑：程序博客网时间：2024/05/21 19:47

前两天项目有个需求是需要在页面中的表格增加一行连签规则的，研究了好一阵，记录下来。 $("table tr:last").after(trHTML); //这里找到

table中的最后一个tr元素将你需要拼接的内容拼接到后面，trHTML就是你需要拼接的内容
$("table tr").length //获取table下tr的个数
先看下效果图：【这里用到了在table中新增一行、删除一行等等的知识】附上代码先：

<div class="mt-50">            <button class="btn btn-primary f-r" id="search" type="button" onclick="addRow()">新增连签积分规则</button>            <table class="table table-border table-bordered table-hover table-bg table-sort" id="signTable">                <thead>                <tr class="text-c">                    <th>奖励类型</th>                    <th>奖励门槛(天)</th>                    <th>积分数</th>                    <th>操作</th>                </tr>                </thead>                <tbody id="tableBody">                <c:forEach items="${conSignRegularList}" var="items">                    <tr class="text-c">                        <td width="300">连续签到奖励</td>                        <td>                            <input type="text" id="continuousSignDay" name="continuousSignDay" class="signDay"                                   value="${items.day}">                        </td>                        <td>                            <input type="text" id="continuousSignScore" name="continuousSignScore" class="signScore"                                   value="${items.score}">                        </td>                        <td>                            <button type="button" class="btn btn-danger-outline size-MINI " onclick="deleRow(this)">删除                            </button>                        </td>                    </tr>                </c:forEach>                </tbody>            </table>        </div>

jquery操作：

<div class="mt-50">            <button class="btn btn-primary f-r" id="search" type="button" onclick="addRow()">新增连签积分规则</button>            <table class="table table-border table-bordered table-hover table-bg table-sort" id="signTable">                <thead>                <tr class="text-c">                    <th>奖励类型</th>                    <th>奖励门槛(天)</th>                    <th>积分数</th>                    <th>操作</th>                </tr>                </thead>                <tbody id="tableBody">                <c:forEach items="${conSignRegularList}" var="items">                    <tr class="text-c">                        <td width="300">连续签到奖励</td>                        <td>                            <input type="text" id="continuousSignDay" name="continuousSignDay" class="signDay"                                   value="${items.day}">                        </td>                        <td>                            <input type="text" id="continuousSignScore" name="continuousSignScore" class="signScore"                                   value="${items.score}">                        </td>                        <td>                            <button type="button" class="btn btn-danger-outline size-MINI " onclick="deleRow(this)">删除                            </button>                        </td>                    </tr>                </c:forEach>                </tbody>            </table>        </div>

阅读全文

0 0