table 增加、删除一行

最新推荐文章于 2018-08-30 11:07:00 发布

有梦想的乌龟

最新推荐文章于 2018-08-30 11:07:00 发布

阅读量950

点赞数

分类专栏： JQuery 文章标签： table 增加删除一行 table表格新增一行

本文链接：https://blog.csdn.net/nlbss/article/details/76383366

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前两天项目有个需求是需要在页面中的表格增加一行连签规则的，研究了好一阵，记录下来。 $("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" οnclick="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 " οnclick="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" οnclick="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 " οnclick="deleRow(this)">删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>


                </tbody>
            </table>
        </div>