如何为 table tr:nth-child(rowNumber) 提供动态值

Question

我有一种情况需要在 table

中单击行后添加行

为此我知道这个

$('table tr:nth-child(2)').after(tr); // which is working but its static.

我的要求是使用以下函数获取我正在获取的单击行的行号

$('#data-grid-table-tree').find('tr').click(function () {
    rowNumber = ($(this).index() + 1)
});

现在我正在使用 $('table tr:nth-child(rowNumber)').after(tr); 抛出以下错误

Uncaught Error: Syntax error, unrecognized expression: :nth-child

为什么？如何为 nth:child.

使用动态值

Answer 1

您在 tr 上绑定了点击事件，为什么不利用它来发挥您的优势。你想把新的 tr 放在它后面。因此，与其使用其索引，不如将其直接插入到单击的元素之后。

$('#data-grid-table-tree').on('click', 'tr', function() {
    $(this).after(tr);
});

Answer 2

因为 rowNumber 是可变的，您需要在选择器中使用它的值 +

$('table tr:nth-child(' + rowNumber + ')').after(tr);

您也可以使用eq如下

$('table tr').eq(rowNumber).after(tr);

由于eq的索引是从零开始的，所以不需要在索引中添加1。

$('#data-grid-table-tree tr').click(function () {
    rowNumber = $(this).index(); // Removed `+ 1` from here
});

编辑：

您也可以使用 $(this) 来引用被点击的元素并在其上使用 after。

$('#data-grid-table-tree tr').click(function () {
    // Code here

    $(this).after(tr);
});

How to provide dynamic values to table tr:nth-child(rowNumber)