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

时间:2022-11-03 09:49:15

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

我有一块DOM我想要插入到我的页面中。目前我只是在盲目地使用:

$(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.

如何做同样的事情,但是将myblob附加到另一个blob中的第二行到最后一行。在这种情况下,另一个blob是一个表,我想在第二行和最后一行之间插入一行。

9 个解决方案

#1


68  

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

#2


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 .

这里用eq来选择最后一行。eq是零指标,负数指标从最后开始。我用-1表示索引。

#3


1  

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).

注意,使用before()元素必须已经插入到文档中(如果元素不在页面中,则不能在另一个元素之前插入)。

So you have to insert someotherblob first:

所以你必须先插入一些东西

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

#4


1  

  • 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.

    我尝试了一下,发现所需的列在enitre表之上移动。因为我没有使用标题栏的广告标签。我再次开始寻找答案,并想出了自己的解决方案。

  • 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:

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:

Jquery:

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

let me know if I answer your question.

如果我回答你的问题,请告诉我。

#5


1  

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

#6


0  

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);
    })

#7


0  

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?

是的,tbody在tfoot之后。奇怪啊,是吧?

Then you can simply use this:

然后你可以简单地使用这个:

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

#8


0  

As simple as this:

这么简单:

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

#9


0  

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

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

同样,你的问题不是很清楚,但是希望上面的链接能涵盖所有的基

#1


68  

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

#2


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 .

这里用eq来选择最后一行。eq是零指标,负数指标从最后开始。我用-1表示索引。

#3


1  

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).

注意,使用before()元素必须已经插入到文档中(如果元素不在页面中,则不能在另一个元素之前插入)。

So you have to insert someotherblob first:

所以你必须先插入一些东西

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

#4


1  

  • 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.

    我尝试了一下,发现所需的列在enitre表之上移动。因为我没有使用标题栏的广告标签。我再次开始寻找答案,并想出了自己的解决方案。

  • 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:

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:

Jquery:

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

let me know if I answer your question.

如果我回答你的问题,请告诉我。

#5


1  

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

#6


0  

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);
    })

#7


0  

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?

是的,tbody在tfoot之后。奇怪啊,是吧?

Then you can simply use this:

然后你可以简单地使用这个:

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

#8


0  

As simple as this:

这么简单:

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

#9


0  

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

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

同样,你的问题不是很清楚,但是希望上面的链接能涵盖所有的基