Question

我试图在用户选择的行之后插入一个表格行：

这是小提琴：

http://jsfiddle.net/tonymaloney1971/ykxgy6dj/2/

因此，如果用户选择产品0，我们会在产品0之后插入新的。

目前我正在尝试insertAfter，但它正在删除下一个表格行？

$（＆＃39; #tableBody tr＆＃39;）。on（＆＃39;点击＆＃39;，＆＃39;按钮＆＃39;，function（）{ var insertData =＆＃34;

Q
W
E
R
Y

＆＃34 ;; var insertAfter = $（this）.closest（＆＃39; tr＆＃39;）;

        if($(this).text()  =='+')
        {
            $(this).text('-');
            //I would like to insert a new table row underneath the current selected table row?
            insertAfter.insertAfer(insertData);
        }
        else
        {
            $(this).text('+');
        }
    });

由于

Answer 1

您需要在dom traversing

上练习

$(document).ready( function () {            
    $('#List li').hide();

    $('#tableBody tr').on('click','button', function() {
        var insertData = "<tr><td><ul><li>Q</li><li>W</li><li>E</li><li>R</li><li>Y</li></ul></td></tr>";
        var insertAfter = $(this).parent();

        if($(this).text()  =='+')
        {
            $(this).text('-');
            //I would like to insert a new table row underneath the current selected table row?
            insertAfter.append(insertData);
        }
        else
        {
            $(this).text('+');
        }
    });                              
});

Answer 2

Ahmet CanGüven的答案非常接近。我必须进行一些小的更改才能使其正常运行。 documentation for insertAfter帮助我们理解原因。

$(document).ready( function () {            
$('#List li').hide();

$('#tableBody tr').on('click','button', function() {
    var $insertData = $("<tr><td><ul><li>Q</li><li>W</li><li>E</li><li>R</li><li>Y</li></ul></td></tr>");
    var $insertAfter = $(this).parent();

    if($(this).text()  =='+')
    {
        $(this).text('-');
        //I would like to insert a new table row underneath the current selected table row?
        $insertData.insertAfter($insertAfter);
    }
    else
    {
        $(this).text('+');
    }
});

}）;

Jquery在选定的表行之后插入表行

2 个答案: