0

PHP データベース クエリへの $.ajax 呼び出しの成功関数に、複数行のデータを挿入する必要があります。

これまでに私が思いついたものは次のとおりです(機能せず、コンソールの $.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)「親」テーブルで機能するようにタグとタグでラップされることはありません.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

エラーが発生する理由は、文字列を関数と連結しようとしているためです$.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 に答える