jQuery - 在 $.ajax 调用中的特定行之后插入新行

Question

我需要在 $.ajax 调用 PHP 数据库查询的成功函数中插入几行数据。

这是我到目前为止的想法（它不起作用，我在 $.each() 行的控制台“意外字符串”中收到语法错误）：

// This is the checkbox element in the row that was clicked on
//$('#tblMovieList tbody tr').find('td input.chkDeleteMovie[value="' + movieID + '"]').parent()

console.log('row html: ' + $('#tblMovieList tbody tr').find('td input.chkDeleteMovie[value="' + movieID + '"]').parent().parent().next().html());

//actorID, actorFirstName, actorLastName

$('#tblMovieList tbody tr').find('td input.chkDeleteMovie[value="' + movieID + '"]').parent().parent().after('<tr id="actorsForMovie' + movieID + '">' +
    '<td colspan="2"></td>' +
    '<td colspan="8">' +
        '<table id="tblActorsForMovie">' +

            $.each(data,function(index,element) {

            '<tr>' +
                '<td>' +
                    'actorID: ' + element['actorID'] + ', name: ' + element['actorFirstName'] + ' ' + element['actorLastName'] +
                '</td>' +
            '</tr>' +
            });
        '</table>' +
    '</td>' +
'</tr>';
);

我需要做的是插入一行，其中包含来自 php 脚本的 json 数据在该行有一个复选框，该复选框的值设置为特定的电影 ID。

console.log 行正确定位了 我需要将新行附加到的行之后的行。 （这有意义吗？）

因此，具有 after() 函数的选择器是正确的。我只是不确定在遍历 json 数据时如何准确地插入新行。

我需要怎么做？

附加信息 要插入的行的最终结构应如下所示：

</tr><!-- closing tag of existing row that the new row is being appended to -->
<tr id="actorsForMovie">
    <td colspan="10"> <!-- There are 10 columns in the "parent" table -->
        <table>
            <tr>
                <td>
                    [actor data]
                </td>
            </tr>
            <tr>
                <td>
                    [actor data]
                </td>
            </tr>
            ... etc for additional rows/actors
        </table>
    </td>
</tr>
<tr> <!-- Opening tag of the existing row that **was** immediately after the row being appended to -->

我创建了a jsFiddle 供任何人帮助我解决这个问题。无论我尝试了什么，插入的表 1) 永远不会被包裹在 and 标记中以使其与“父”表一起使用，并且 2) 插入的表 always 只会放入表格其余部分中第一个单元格的区域。

Answer 1

chead23 让我走上了正轨，所以在等待更多回复的同时，我继续寻找解决方案。

这是最终的工作代码：

 var actorRow = '',
    actorsTableRow = '',
    $row = $('#tblMovieList tbody tr').find('td input.chkDeleteMovie[value="' + movieID + '"]').parent().parent();

    // Add each actor as its own table row
    $.each(data, function(index,element) {
        actorRow += '<tr>' +
            '<td>' +
                element['actorFirstName'] + ' ' + element['actorLastName'] +
            '</td>' +
        '</tr>';
    });

    // Build the parent table's row around the actor rows
    actorsTableRow += '<tr id="actorsForMovie">' +
        '<td colspan="11">' +
            '<table>' +
                actorRow +
            '</table>' +
        '</td>' +
    '</tr>';

    // Add the new row to the table immediately after the movie row that was clicked on
    $row.after(actorsTableRow);

从代码中的 cmets 可以看出，我只是将所有内容放入字符串变量中，然后将其添加到父表中。 Chead 尝试使用$.append() 和$.wrap() 似乎有不必要的复杂事情。也许这些在技术上使用起来更快，但由于我没有得到任何额外的帮助，这就是我想出的（它有效 - 这就是我所需要的！：P）。

Answer 2

您收到错误的原因是您试图将字符串与函数$.each() 连接。

如果我理解正确，我认为你想做这样的事情：

var row = $('#tblMovieList tbody tr').find('td input.chkDeleteMovie[value="' + movieID + '"]').parent().parent();

 var afterItem = $('<table id="tblActorsForMovie"></table>');

 $.each(data, function (index, element)
 {
     afterItem.append('<tr><td>' + 'actorID: ' + element['actorID'] + ', name: ' + element['actorFirstName'] + ' ' + element['actorLastName'] + '</td></tr>');
 });

 row.after(afterItem.wrap('<td colspan="2"></td><td colspan="8">'));