Question

我遇到一个奇怪的问题，当我使用jQuery插入新行时，我无法弄清楚。我能够插入一个新行，但是在父级之后的前一行基本上合并到它的右边而不是在它下面。无论如何这里是我的代码：jQuery

       $(document).ready(function ()
         {       
             $('.parent').after('<td>Sub Total</td><td class=sub0></td><td class=sub1></td>');
             $('.sub1').after('</tr><tr>');               
         });

这是jQuery函数执行后的html表代码：

<table class="table-style" id="tbl1">
    <tbody>
        <tr>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
            <th>column4</th>
        </tr>
        <tr>
            <td class="parent" rowspan="14">TEST1</td>
            <td>Sub Total</td>
            <td class="sub0"></td>
            <td class="sub1"></td>
        <tr>
        </tr>
            <td class="child">23</td>
            <td class="child">106040943</td>
            <td class="child">117638617</td>
        </tr>
        <tr>
            <td class="child">24</td>
            <td class="child">20733153</td>
            <td class="child">22164885</td>
        </tr>
        <tr>
            <td class="child">25</td>
            <td class="child">49086765</td>
            <td class="child">53820000</td>
        </tr>
        <tr>
            <td class="child">26</td>
            <td class="child">30627906</td>
            <td class="child">34237662</td>
        </tr>
        <tr>
            <td class="child">27</td>
            <td class="child">5408650</td>
            <td class="child">5671224</td>
        </tr>
        <tr>
            <td class="child">28</td>
            <td class="child">2548936</td>
            <td class="child">2647287</td>
        </tr>
        <tr>
            <td class="child">29</td>
            <td class="child">21911743</td>
            <td class="child">22766661</td>
        </tr>
        <tr>
            <td class="child">30</td>
            <td class="child">15496867</td>
            <td class="child">16387141</td>
        </tr>
        <tr>
            <td class="child">31</td>
            <td class="child">9897902</td>
            <td class="child">9646904</td>
        </tr>
        <tr>
            <td class="child">32</td>
            <td class="child">23750440</td>
            <td class="child">25845771</td>
        </tr>
        <tr>
            <td class="child">33</td>
            <td class="child">25213168</td>
            <td class="child">27009243</td>
        </tr>
        <tr>
            <td class="child">34</td>
            <td class="child">71556982</td>
            <td class="child">79796691</td>
        </tr>
        <tr>
            <td class="child">35</td>
            <td class="child">13464563</td>
            <td class="child">16890000</td>
        </tr>
        <tr>
            <td class="child">36</td>
            <td class="child">9898131</td>
            <td class="child">12360000</td>
        </tr>
        <tr>
            <td> Grand Total:</td>
            <td></td>
            <td id="grandtotal">1715284066</td>
            <td id="grandtotal1">1822116442</td>
        </tr>
    </tbody>
</table>

Answer 1

某些行有四列，其他行有三列。这是不一致的。在包含三列的行中添加空td标记，或使用colspan="2"属性。

Answer 2

您应该在.parent的父级之后追加一行。所以代码应该是：

$(document).ready(function() {
    $('.parent').parent().after(
        '<tr><td>Sub Total</td><td class="sub0"></td><td class="sub1"></td></tr>'
    );
});

https://jsfiddle.net/ducfilan/9z6mbx8t/

Answer 3

这是一个可能的解决方案，没有JQUERY，只有Navite Javascript。

var a = document.querySelector("table tbody");
var t = a.children.length;
var i = t-1;
a.insertRow(i);
a.children[i].innerHTML = "<td>Sub Total</td><td class=sub0>aaaa</td><td class=sub1>bbb</td><td>cccc</td>";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-style" id="tbl1">
<thead>
<tr><th>column1</th><th>column2</th><th>column3</th><th>column4</th></tr>
</thead>
<tbody>
<tr><td class="parent" rowspan="15">TEST1</td><td>Sub Total</td><td class="sub0"></td><td class="sub1"></td></tr><tr><td class="child">23</td><td class="child">106040943</td><td class="child">117638617</td></tr>
<tr><td class="child">24</td><td class="child">20733153</td><td class="child">22164885</td></tr><tr><td class="child">25</td><td class="child">49086765</td><td class="child">53820000</td></tr><tr><td class="child">26</td><td class="child">30627906</td><td class="child">34237662</td></tr><tr><td class="child">27</td><td class="child">5408650</td><td class="child">5671224</td></tr><tr><td class="child">28</td><td class="child">2548936</td><td class="child">2647287</td></tr><tr><td class="child">29</td><td class="child">21911743</td><td class="child">22766661</td></tr><tr><td class="child">30</td><td class="child">15496867</td><td class="child">16387141</td></tr>
<tr><td class="child">31</td><td class="child">9897902</td><td class="child">9646904</td></tr>
<tr><td class="child">32</td><td class="child">23750440</td><td class="child">25845771</td></tr>
<tr><td class="child">33</td><td class="child">25213168</td><td class="child">27009243</td></tr>

<tr><td class="child">34</td><td class="child">71556982</td><td class="child">79796691</td></tr><tr><td class="child">35</td><td class="child">13464563</td><td class="child">16890000</td></tr><tr><td class="child">36</td><td class="child">9898131</td><td class="child">12360000</td></tr><tr><td> Grand Total:</td><td></td><td id="grandtotal">1715284066</td><td id="grandtotal1">1822116442</td></tr>

</tbody></table>

jQuery - 在html表中插入新行的问题

3 个答案: