0

我需要在 $.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>';
);

我需要做的是在具有设置为特定电影 ID 的值的复选框的行之后插入包含来自 php 脚本的 json 数据的行。

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

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

4

2 回答 2

3

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）。

于 2013-02-21T15:31:10.637 回答
1

您收到错误的原因是因为您试图将字符串与 function 连接起来$.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">'));
于 2013-02-19T13:17:56.077 回答