I'm trying to insert another table row into a table after calling from a submit button,

PHP/CodeIgniter:

<tr id="wiring_details_<?php echo $part->id;?>-<?php echo $zone->id;?>">
<td COLSPAN='2'>
    Wire Type: 
    <select name='select_wire_<?php echo $part->id; ?>' onchange='Estimate.select_wire( <?php echo $part->id;?>, this.value );'>
        <option value='' selected>Select wire..</option>
        <option value='1'>14/2</option>
        <option value='2'>14/4</option>
        <option value='3'>16/4</option>
        <option value='4'>16/2</option>
        <option value='5'>RG6</option>
        <option value='6'>CAT5</option>
        <option value='7'>RG59</option>
        <option value='8'>LVT</option>
        <option value='9'>CAT6</option>
        <option value='10'>HDMI</option>
        <option value='11'>Shielded CAT6</option>
    </select>    
</td>
<td COLSPAN='2'>Length: <input type='text' id='id_wire_length_<?php echo $part->id; ?>' name='wire_length_<?php echo $part->id; ?>' value='<?php echo $part->wire_length; ?>' /></td>
<td COLSPAN='2'>Retail Price: <input type='text' id='id_wire_retail_<?php echo $part->id; ?>' name='wire_retail_<?php echo $part->id; ?>' value='<?php echo $part->wire_retail / 100; ?>' /> </td>
<td COLSPAN='2'>Add Another: <input type='submit' id='id_wire_retail_<?php echo $part->id; ?>' name='wire_retail_<?php echo $part->id; ?>' value='Add Wire' onClick="addWire();" /> </td>
<input type='hidden' id='wire_id_<?php echo $part->id; ?>' name='wire_id_<?php echo $part->id; ?>' value='<?php echo $part->wire_id; ?>'/>
</tr>

The "Add another" column has a submit button in it which is going to insert another row into the DOM after the row it is called from, how can this be achieved in Javascript or JQuery as JQ is in this project too.

I know in JQ that I could use something like $(this).parent().after? But I am not 100% on its usage.

Thanks!

I'm trying to insert another table row into a table after calling from a submit button,

PHP/CodeIgniter:

<tr id="wiring_details_<?php echo $part->id;?>-<?php echo $zone->id;?>">
<td COLSPAN='2'>
    Wire Type: 
    <select name='select_wire_<?php echo $part->id; ?>' onchange='Estimate.select_wire( <?php echo $part->id;?>, this.value );'>
        <option value='' selected>Select wire..</option>
        <option value='1'>14/2</option>
        <option value='2'>14/4</option>
        <option value='3'>16/4</option>
        <option value='4'>16/2</option>
        <option value='5'>RG6</option>
        <option value='6'>CAT5</option>
        <option value='7'>RG59</option>
        <option value='8'>LVT</option>
        <option value='9'>CAT6</option>
        <option value='10'>HDMI</option>
        <option value='11'>Shielded CAT6</option>
    </select>    
</td>
<td COLSPAN='2'>Length: <input type='text' id='id_wire_length_<?php echo $part->id; ?>' name='wire_length_<?php echo $part->id; ?>' value='<?php echo $part->wire_length; ?>' /></td>
<td COLSPAN='2'>Retail Price: <input type='text' id='id_wire_retail_<?php echo $part->id; ?>' name='wire_retail_<?php echo $part->id; ?>' value='<?php echo $part->wire_retail / 100; ?>' /> </td>
<td COLSPAN='2'>Add Another: <input type='submit' id='id_wire_retail_<?php echo $part->id; ?>' name='wire_retail_<?php echo $part->id; ?>' value='Add Wire' onClick="addWire();" /> </td>
<input type='hidden' id='wire_id_<?php echo $part->id; ?>' name='wire_id_<?php echo $part->id; ?>' value='<?php echo $part->wire_id; ?>'/>
</tr>

The "Add another" column has a submit button in it which is going to insert another row into the DOM after the row it is called from, how can this be achieved in Javascript or JQuery as JQ is in this project too.

I know in JQ that I could use something like $(this).parent().after? But I am not 100% on its usage.

Thanks!

• php
• javascript
• jquery
• dom
• codeigniter

5 Answers 5

I would a class to the buttons (the add buttons) like class="add-button" and then

$('.add-button').click( function() {
   $(this).closest('tr').after('<tr>...</tr>');
   return false;
});

Demo at http://jsfiddle/gaby/WCprC/

If you want to add row as last to table

$("#table_id").append($("<tr>"))

If you want to add row after a certain row in which you have submit button do sth. like that

$("<tr>").insertAfter($(this).parents("tr").eq(0))

The $("<tr>") create jquery object so you can manipulate it so it can have content you would like to.

$(this).parent().parent().after('<tr>...</tr>');

Ammended. The first parent from the button should be the TD, the parent of that should be the TR element, so adding after that will give you a new row.

Try this:

$("#my_row_id").after(my_new_rows_data);

Just noticed your have a hidden element just before the closing of your row you should really place that inside one of the td to validate your code.

I do this quiet a lot but I clone the last row of my table and then "reset" their values