Question

最初我有一个如下表

python manage.py migrate

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

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

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

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

Answer 1

您错过了选择器中的点（.）。您还忘记了关闭</table中的第一个表，这使第二个表的代码无法正常工作。

您也不需要使用 $ 来引用元素，只需将类指定为参数即可，例如insertAfter('.class_tr_0')：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First Table
<table>
    <tbody>
        <tr id="tr_0" class="class_tr_0"><td>1 1</td></tr>
        <tr id="tr_1" class="class_tr_1"><td>1 2</td></tr>
        <tr id="tr_2" class="class_tr_2"><td>1 3</td></tr>
        <tr id="tr_3" class="class_tr_3"><td>1 4</td></tr>
        <tr id="tr_4" class="class_tr_4"><td>1 5</td></tr>
    </tbody>
</table>
Second Table
<table>
    <tbody>
        <tr id="tr_0" class="class_tr_0"><td>2 1</td></tr>
        <tr id="tr_1" class="class_tr_1"><td>2 2</td></tr>
        <tr id="tr_2" class="class_tr_2"><td>2 3</td></tr>
        <tr id="tr_3" class="class_tr_3"><td>2 4</td></tr>
        <tr id="tr_4" class="class_tr_4"><td>2 5</td></tr>
    </tbody>
</table>

Answer 2

您错过了点(.)，并且不需要使用$。只需使用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>

根据穆罕默德的评论

在表的行之间动态添加行

2 个答案: