jquery - insert inside a div within a table row -

hello have table having div in alternate rows. want add table inside divs.

please check link , update me. advance

<table>     <tr>         <td>hi</td>     </tr>     <tr>         <td>foo 1</td>         <td>             <input type="button" value="remove" id="remove1" />         </td>     </tr>     <tr>         <td>             <div></div>         </td>     </tr>     <tr>         <td>foo 2 </td>         <td>             <input type="button" value="remove" id="remove2" />         </td>     </tr>     <tr>         <td>             <div></div>         </td>     </tr> </table>  $("table tr input").on('click', function(e){     alert($(this).closest('td').parent()[0].sectionrowindex);     alert($(this).closest("tr").index()+1);     var row = $(this).closest("tr").index()+1;     $('table tr:row').find('div').append("<table><tr><td>hi</td></tr></table>"); }); 

you have use .eq() insert row @ position , try check if div exists or not!
though question not quite clear still give try.

$("table tr input").on('click', function(e){     var row = $(this).closest("tr").index() + 1; // index      if($('table tr').eq(row).find('div').length > 0); // check if alternate row contains div         $('table tr').eq(row).find('div').append("<table><tr><td>hi</td></tr></table>"); // append table div }); 

fiddle demo

---

updated

as we're checking if div exists or not, no need take index values of rows, can directly traverse through dom expected div element.

$("table tr input").on('click', function(e){     if($(this).closest("tr").next().find('div').length > 0)       $(this).closest("tr").next().find('div').append("<table><tr><td>hi</td></tr></table>"); }); 

docs:

next()

find()

updated fiddle

hope need this!