javascript - 在表的行之间动态添加行

Question

已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。

---

这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

已关闭 4 年前。

Improve this question

最初我有一个如下表

<table>
    <tbody>
        <tr id="tr_0" class="class_tr_0">...</tr>
        <tr id="tr_1" class="class_tr_1">...</tr>
        <tr id="tr_2" class="class_tr_2">...</tr>
        <tr id="tr_3" class="class_tr_3">...</tr>
        <tr id="tr_4" class="class_tr_4">...</tr>
    </tbody>
</table

我需要在 tr_0 或 tr_1 等之后动态添加一行，

<table>
    <tbody>
        <tr id="tr_0" class="class_tr_0">...</tr>
        <tr id="tr_0_d">...</tr>
        <tr id="tr_1" class="class_tr_1">...</tr>
        <tr id="tr_2" class="class_tr_2">...</tr>
        <tr id="tr_3" class="class_tr_3">...</tr>
        <tr id="tr_4" class="class_tr_4">...</tr>
    </tbody>
</table>

我生成了一行，例如

newRow = `<tr id="tr_0_d">...</tr>`

我使用下面的 jQuery 样式来添加一行。但它不起作用。

$(newRow).insertAfter($('class_tr_0'));

Answer 1

您错过了点(.)，并且不需要使用$。只需使用 insertAfter('.class_tr_0')

var newRow = `<tr id="tr_0_d"><td>added</td></tr>`
$(newRow).insertAfter('.class_tr_0');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr id="tr_0" class="class_tr_0">...</tr>
        <tr id="tr_1" class="class_tr_1">...</tr>
        <tr id="tr_2" class="class_tr_2">...</tr>
        <tr id="tr_3" class="class_tr_3">...</tr>
        <tr id="tr_4" class="class_tr_4">...</tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr id="tr_0" class="class_tr_0">...</tr>
        <tr id="tr_0_d">...</tr>
        <tr id="tr_1" class="class_tr_1">...</tr>
        <tr id="tr_2" class="class_tr_2">...</tr>
        <tr id="tr_3" class="class_tr_3">...</tr>
        <tr id="tr_4" class="class_tr_4">...</tr>
    </tbody>
</table>

根据穆罕默德的评论