Question

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

这是我到目前为止所提出的（它不起作用，我在$ .each（）行的控制台“Unexpected String”中收到语法错误）：

// 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> <tr id="actorsForMovie"> <td colspan="10">  <table> <tr> <td> [actor data] </td> </tr> <tr> <td> [actor data] </td> </tr> ... etc for additional rows/actors </table> </td> </tr> <tr> 

我已经为任何人创建了a jsFiddle，以帮助我解决这个问题。无论我尝试过什么，插入的表1）永远不会被包装在和标签中以使其与“父”表一起使用，并且2）插入的表总是只被放入表格其余部分中第一个单元格的区域。

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);

正如您在代码中的注释所看到的，我只是将所有内容放入字符串变量中，然后将其添加到父表中。 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">'));

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

2 个答案: