如何为表tr提供动态值：nth-​​child（rowNumber）

Question

我遇到需要在表

中单击行后添加行的情况

为此，我知道这个

$('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);投掷以下错误

  

未捕获错误：语法错误，无法识别的表达式:: nth-child

为什么会这样？如何为第n个：child使用动态值。

Answer 1

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

Answer 2

您绑定了tr上的点击事件，为什么不利用它。您希望在其后面放置新的tr。因此，不要使用其索引，而是在单击的元素之后直接插入它。

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