找到你要的答案

Q:appending to tbody appends to the top?

Q:附加TBODY追加到山顶吗?

I'm getting weird results appending to a tbody. Sometimes it appends to the top, other times both top and bottom.

This jsfiddle shows that appending to a tbody is at the bottom: https://jsfiddle.net/dxnw34bb/

But on my website, it appends to the top of the table:

http://tx.rxtron.com/restore.php (change the value on the last input box (storage slots) to 5)

The code on my site is:

$('tbody#form').append("<tr class='storage-contents' id='slot-"+i+"'><td>Slot "+(i+1)+":</td> <td>"+ "<button id='potion-"+i+"'>Potion</button>"+ "<button id='ring-"+i+"'>Ring</button>"+ "<button id='wand-"+i+"'>Wand</button> <button id='empty-"+i+"'>Empty</button></td></tr>");

Why is it appending the button rows to the top of the table instead of the bottom?

我越来越怪异的结果添加到tbody。有时它附加到顶部,有时顶部和底部。

这表明,追加JSFiddle TBODY底部:https://jsfiddle.net/dxnw34bb/

但在我的网站上,它附加到桌子上:

http://tx.rxtron.com/restore.php (change the value on the last input box (storage slots) to 5)

我网站上的代码是:

$('tbody#form').append("<tr class='storage-contents' id='slot-"+i+"'><td>Slot "+(i+1)+":</td> <td>"+ "<button id='potion-"+i+"'>Potion</button>"+ "<button id='ring-"+i+"'>Ring</button>"+ "<button id='wand-"+i+"'>Wand</button> <button id='empty-"+i+"'>Empty</button></td></tr>");

为什么要添加按钮的行表的顶部而不是底部?

answer1: 回答1:

EDIT
As stated from CBroe in the comment the caption tag can't be placed inside the table as child.(link by CBroe:Code Check)
Also you haven't closed the form tag

The problem is that on your site you have got 2 tbody and the #form is before the one with all the inputs.
From firebug:

<table>
    <tbody id="form"> </tbody>
    <caption>Restore Stats</caption>
    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
            <td>Storage Slots:</td>
            <td>
            <td class="tip">The size of your storage box</td>
        </tr>
    </tbody>
</table>

EDIT
As stated from CBroe in the comment the caption tag can't be placed inside the table as child.(link by CBroe:Code Check)
Also you haven't closed the form tag

The problem is that on your site you have got 2 tbody and the #form is before the one with all the inputs.
From firebug:

<table>
    <tbody id="form"> </tbody>
    <caption>Restore Stats</caption>
    <tbody>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
            <td>Storage Slots:</td>
            <td>
            <td class="tip">The size of your storage box</td>
        </tr>
    </tbody>
</table>
jquery  table