jquery：在表的倒数第二行中使用 appendTo

Question

I have a piece of the DOM that I'd like to insert into my page. Currently I'm just blindly using:

$(myblob).appendTo(someotherblob);

How do I do the same thing, but append myblob to the second to last row that is within someotherblob. someotherblob in this case is a table and I want to inject a row above the second to last one.

Answer 1

$('#mytable tr:last').before("<tr><td>new row</td></tr>")

Answer 2

You can also select the row by index selector .

$('#mytable tr').eq(-1).before("<tr><td>new row</td></tr>")

Here eq is used to select the last row . eq is zero index and negative index starts from last. so i used -1 in index .

Answer 3

Note that with before() the elements must already be inserted into the document (you can't insert an element before another if it's not in the page).

So you have to insert someotherblob first:

$('selector to insert someotherblob at')
    .append(someotherblob)
       .find('table tr:last')
          .prev()
          .before(myblob);

Answer 4

• I appreciate with answer given by orin which was this one .

• I tried it and found that the required column literally shifted above the enitre table. It's because I do not use thead tag for the heading column. Once again I started digging for the answer and came up with my own solution.

• So here it is: In my scenario it was required to show grand total of all the entries coming in every single number type column. It was not possible for me to make calculation unless all the rows are populated on the fly.

HTML:

<tr class="gTotal"> 
      <th colspan="4" class="head">Grand Total</th>
      <th><?php echo $grandTtlResumeSntCnt; ?></th>
      <th><?php echo $grandTtlEvalCnt; ?></th>
      <th><?php echo $grandTtlUniqEvalCnt; ?></th>
      <th><?php echo $grandTtlResCnt; ?></th>
      <th><?php echo $grandTtlUniqResCnt; ?></th>
</tr>
</table>

Jquery:

$('.gTotal').insertBefore('table>tbody>tr:nth-child(2)');

let me know if I answer your question .

Answer 5

$('#mytable tr:last').prev().after("<tr><td>new row</td></tr>")

Answer 6

I recently put some code online that helps you deal with table modifications:

http://notetodogself.blogspot.com/2009/08/javascript-insert-table-rows-table-body.html

Also, you question is not too clear, but hopefully the link above will cover all bases

Answer 7

i think you want to add a row per each row of the table beetween de second and the last row.

in this case try :

var rows=someotherblob.find("TR");
var nrows=rows.length;
    rows.slice(1,(nrows-2)).each(function(){
     $(this).append(myblob);
    })

Answer 8

A bit of a shot in the dark, but I'm guessing that you've got a footer, or maybe even data entry, at the bottom of a table, and you want to add rows to the data, before the footer. In that case, you should restructure your table to this:

<table id="myTable">
    <thead>
        <tr><!-- header row(s) --></tr>
    </thead>
    <tfoot>
        <tr><!-- footer row(s) --></tr>
    </tfoot>
    <tbody>
        <tr><!-- exciting and possibly dynamically inserted data goes here --></tr>
    </tbody>
</table>

Yes, tbody does come after tfoot . Wierd, huh?

Then you can simply use this:

$("#myTable tbody").append(newrow);

Answer 9

就这么简单：

$("#TableName tr:last").prev().before("<tr><td>Hello World</td></tr>");