Question

（由于我无法回答关于'价值'的一些基本问题 - 我已经重新设定了目标 - 希望能让解决方案变得更容易/更清晰）

这个HTML是一个起点。当我点击一行的“按钮”时，我想在该行之后插入一行。新行的内容将来自ajax调用，但对于这个问题，我只需要在TR之后插入“tom，dick或harry”（取决于所选内容......）。

<table id="xTable" >

    <thead>
        ...
    </thead>

    <tfoot>
        ...
    </tfoot>

    <tbody>

        <tr>
            <td nowrap class="segment" >
                <div class="btn-group" >
                    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > + <span class="caret" ></span></button>
                    <ul class="dropdown-menu segmentList" >
                        <option onclick="insRow('tom')" >tom</option>
                        <option onclick="insRow('dick')" >dick</option>
                        <option onclick="insRow('harry')" >harry</option>
                    </ul>
                </div>
                <span class="segmentLabel" >BOB</span> 
            </td>
        </tr>


        <tr>
            <td nowrap class="segment" >
                <div class="btn-group" >
                    <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > + <span class="caret" ></span></button>
                    <ul class="dropdown-menu segmentList" >
                        <option onclick="insRow('tom')" >tom</option>
                        <option onclick="insRow('dick')" >dick</option>
                        <option onclick="insRow('harry')" >harry</option>
                    </ul>
                </div>
                <span class="segmentLabel" >LISA</span>
            </td>
        </tr>

    </tbody>

</table>

这是我现在拥有的JS - 不起作用

function insRow( i ) {

    var tr = $( this ).parents().closest( 'tr' );       
    $( '#xTable tbody' ).append( '<tr><td>' + i + </td></tr>' ).insertAfter( tr );

};

这是一个小提琴...... https://jsfiddle.net/w95xsd2L/3/

Answer 1

请参阅小提琴：https://jsfiddle.net/w95xsd2L/4/

您的设置中出现了很多问题，一个问题是传递this，当您通过insRow.call(this, ...)调用该函数时，可以通过显式提供它来避免这种问题。
然后，您可以参考parents().closest()的方式，其中父母（）并非必要。
您也不需要insertAfter或进行其他表格查询，只需将after()应用于您已找到的TR closest

JS：

function insRow( i ) {

    var $tr = $( this ).closest( 'tr' );
    $tr.after( '<tr><td>' + i + '</td></tr>' );

};

Answer 2

所以我不知道this是什么。

var tr = $( this ).parents().closest( 'tr' );

该行正在做的是获取该项目的所有父项的列表。之后，它通过该列表并找到tr的父母。所以如果你有嵌套表，它会做一些奇怪的事情。你应该删除parent（）部分。你应该这样做：

var tr = $( this ).closest( 'tr' );

现在添加新行的行实际上并没有按照您的想法行事。

$( '#xTable tbody' ).append( data ).insertAfter( tr );

它所说的是将“数据”附加到tbody而不是在tr之后附加tbody。

你应该这样做

tr.after(data);

或

$(data).insertAfter(tr);

Jquery使用ajax插入行，而不是按正确顺序放置行

2 个答案: