Search jQuery

jQuery Forum

Getting Started

surendarmx

Adding a row to a table dynamically inside another table

in Getting Started • 10 years ago

Hi pals,

I am new to jquery, especially this kind work.. Please help in my work.

I need to insert a row onclick a button, 'add'.

Inside that table I am having another table, which has options(three column) of the parent table.

And I am having another button called 'add options' which onclick I need to add a new row to the options table appropriate to that parent row.

This is the screeshot of the actual.

This is my HTML

<div id="fourthDynField" class="fieldType" style="font-family: arial; cursor: pointer; background-color: gainsboro; height: 10px; padding: 10px; font-size: 12px;">Field type : Radio button

</div>

<th rowspan="2">Label</th>

<th rowspan="2">Order</th>

<th colspan="4">Options</th>

</tr>

<td>

<td>Value</td>

</tr>

</table>

</td>

</tr>

<<THE TEXT BOX DETAILS COMING FROM JAVA LAYER, I NEED EMPTY TEXT BOXES IN NEW ROWS>>

</table>

</div>

I am confused how to start itself.

Please help me in this issue.

Thanks in advance

Surendar

Replies(5)

dsvick

Re: Adding a row to a table dynamically inside another table

10 years ago

Since the table you need to add the row to has an id you can target that specific table and use the append method, http://api.jquery.com/append/ , to add content to it.

function addNewOption(){
$("#testingTable1").append("<tr align='center' style='background: #f2f2f2;'><td>ID</td><td>Value</td><td>Text</td><td></td></tr>");
}

Dave

surendarmx

Re: Adding a row to a table dynamically inside another table

10 years ago

Hi Dave,

Thanks for the reply and I tried the code that you shared. Its working fine in adding a row in the child table.

Is there any way to add the entire row in parent table and inside this code can be used for adding options row, so that both adding parent row in parent table and options row in child table can be added simultaneously.

And I think we need to handle this using Id, and please help me generating dynamically different id and names using jQuery, so that with the help of that Id I can add new row to that table.

Thanks,

Suren

dsvick

Re: Adding a row to a table dynamically inside another table

10 years ago

Sure, you can add a new row to the parent table the same way you added one to the options table. Just use append and add all the markup to it the same as the code above.

You can give each inner table a unique ID by creating a global variable and incrementing it each time you add a new row. So, if you created a function named addNewPaymentMEthod to add the new row to the parent, part of that code would look like this, to assign the unique id

var innerTable = 1;
function addNewPaymentMethod(){
$("#NewCheckBox").append("<tr align='center' style='background: #f2f2f2;'><th rowspan='2'>Label</th> ...... <table id='testingTable" + innerTable++ + "' border='1'> .....");
}

Dave

surendarmx

Re: Adding a row to a table dynamically inside another table

10 years ago

Hi Dave,

Yes, this is working fine.

Thank you very much !

One small issue is there, When ever I am adding new option. It is adding to the first parent row only(testingTable1) since it is hard coded as in the below code, how to change this dynamically like while I add option to a parent table, it should add only to that option table inside the parent table.

For example:

I am appending a new parent row with its option row id="testingTable2",

When I add new option row for testingTable2, it should append a row in testingTable2 and not in testingTable1 but it is not happening in my code.

And delete button for new row is also not working. Please do help me . Thanks

function addNewOption(){

$("#testingTable2").append("<tr align='center' style='background: #f2f2f2;'><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><img class='delOptionRow' style='cursor: pointer;' src='../img/delete-icon.gif' /></td></tr>");

}

var new_id = 2;

function addNewRow(){

$("#NewCheckBox").append("<tr align='center' style='background: #f2f2f2;''><td rowspan='2'><input type='text' size='1' /></td><td rowspan='2'><input type='text' size='1' /></td><td rowspan='2'><input type='text' size='1' /></td><td colspan='4'>Options</td><td rowspan='2'><input type='button' value='add options' onclick='addNewOption()'></td></tr><tr align='center'><td><table id='testingTable" +new_id++ +"' border='1'><tr align='center' style='background: #f2f2f2;'><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><img class='delOptionRow' style='cursor: pointer;' src='../img/delete-icon.gif' /></td></tr></table></td></tr>");

$('#testingTable2 td img.delOptionRow').click(function(){

$(this).parent().parent().remove();

});

}

The above is the code that I am using.

Thanks,

Suren

surendarmx

Re: Adding a row to a table dynamically inside another table

10 years ago

Hi,

my another doubt is,

why this is not working,

var new_id=1;

function addNewRow(){

$("#NewCheckBox").append("<tr align='center' style='background: #f2f2f2;''><td rowspan='2'><input type='text' size='1' /></td><td rowspan='2'><input type='text' size='1' /></td><td rowspan='2'><input type='text' size='1' /></td><td colspan='4'>Options</td><td rowspan='2'><input id='button"+new_id+"' type='button' value='add options"+new_id+"'></td></tr><tr align='center'><td><table class='testTable' id='testingTable"+new_id+"' border='1'><tr align='center' style='background: #f2f2f2;'><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><img class='delOptionRow' style='cursor: pointer;' src='../img/delete-icon.gif' /></td></tr></table></td></tr>");

$('#button'+new_id).click(function(){

var new_btn = $("<tr align='center' style='background: #f2f2f2;'><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><input type='text' size='1' /></td><td><img class='delOptionRow' style='cursor: pointer;' src='../img/delete-icon.gif' /></td></tr>");

new_btn.appendTo('#testingTable'+new_id);

});

new_id = new_id+1;

}

Can I use like this, #testingTable'+new_id for append function ?

Thanks,

Suren

Top Reply

Response title

Attachments

jQuery Forum

Adding a row to a table dynamically inside another table

Replies(5)

Re: Adding a row to a table dynamically inside another table

Re: Adding a row to a table dynamically inside another table

Re: Adding a row to a table dynamically inside another table

Re: Adding a row to a table dynamically inside another table

Re: Adding a row to a table dynamically inside another table

Statistics

Tags

Actions