table - jQuery - Insert new row after a specific row in $.ajax call -

table - jQuery - Insert new row after a specific row in $.ajax call -

i need insert several rows of info in success function of $.ajax phone call php database query.

here's i've come far (it doesn't work , syntax error in console "unexpected string" on $.each() line):

// checkbox element in row 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>'; );

what need insert row contains json info php script after row has checkbox value set specific film id.

the console.log line correctly locates row after row need append new row to. (did create sense?)

so, selector has after() function correct. i'm not sure how insert new row while iterating through json data.

how need that?

additional info final construction of row inserted should this:

</tr><!-- closing tag of existing row new row beingness appended --> <tr id="actorsformovie"> <td colspan="10"> <!-- there 10 columns in "parent" table --> <table> <tr> <td> [actor data] </td> </tr> <tr> <td> [actor data] </td> </tr> ... etc additional rows/actors </table> </td> </tr> <tr> <!-- opening tag of existing row **was** after row beingness appended -->

i have created a jsfiddle take crack @ helping me figure out. no matter i've tried, inserted table 1) never gets wrapped in , tags create work "parent" table, , 2) inserted table always gets set in area of first cell in rest of table.

chead23 got me on right track, while waiting additional responses on continued solution.

here final working code:

var actorrow = '', actorstablerow = '', $row = $('#tblmovielist tbody tr').find('td input.chkdeletemovie[value="' + movieid + '"]').parent().parent(); // add together each actor own table row $.each(data, function(index,element) { actorrow += '<tr>' + '<td>' + element['actorfirstname'] + ' ' + element['actorlastname'] + '</td>' + '</tr>'; }); // build parent table's row around actor rows actorstablerow += '<tr id="actorsformovie">' + '<td colspan="11">' + '<table>' + actorrow + '</table>' + '</td>' + '</tr>'; // add together new row table after film row clicked on $row.after(actorstablerow);

as can see comments in code, set string variables , added parent table. chead's effort @ using $.append() , $.wrap() seems have unnecessarily complicated things. perhaps technically quicker use, wasn't getting additional help, came (it works - that's needed! :p).

jquery table insert row