CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dev1234
dev1234

Reputation: 5716

Append to end of a div through Jquery

I have this div which has a table and i want to add a row to that table dynamically based on a scenario. how this can be done with jquery ?

<div style="margin-bottom: 4px;" id="div_outgoing_call_dates_rows">
<table id="tbl_dynamic_call_dates">
<tbody><tr><td>Appointment date</td><td>Client time window</td></tr>
<tr id="client_app_0"><td>04/10/2013</td><td><select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">undefined<option value="5702">07am - 10am</option><option value="5703">10am - 1pm</option><option value="5704">12pm - 3pm</option><option value="5705">03pm - 06pm</option><option value="5706">06pm - 09pm</option><option value="5707">07pm - 10pm</option><option value="5708">09pm - 12am</option><option value="5709">12am - 7am</option></select></td>
</tr>
</tbody>
</table>
</div>

I tried this and it didint work at last row instead adds inside the div and old contents gets cleared.

$("#div_outgoing_call_dates_rows").append(dynamicRow);

Appreciate an early response.

Fiddle Here

EDIT 2

     $.each(array,function(i){
     if($("#client_app_tr_" + array[i]).length == 0) {
     console.log("yes  not exisit so adding a new one");
     dynamicRow += "<tr id=\'client_app_tr_" + array[i] + "\'><td>" + array[i] + "</td><td>" + "<select id=\'client_time_window_" + i + "\' name=\'CSSAtapsClient[client_time_window_arr][" + i + "]\'>" + dynamicDD + "</select>" + "</td></tr>";
     }
     });

I have tr id's like this -> client_app_tr_07/10/2013, client_app_tr_08/10/2013, client_app_tr_09/10/2013 ... so if that id is not there i need to add a new row. it doesnt work because the way i am checking it always goes inside this loop. if($("#client_app_tr_" + array[i]).length == 0) {}

EDIT 3

This also doesnt seem to be working. i must be missing something or isnt there any way to check weather a element id exisit or not in jquery ?

if($("#client_app_tr_" + array[i])[0] !== true) {}

Upvotes: 1

Views: 2511

Answers (3)

S. S. Rawat
S. S. Rawat

Reputation: 6111

Try this, this will help you.

var old_item =$('#div_outgoing_call_dates_rows').html(); 
old_item=old_item+'New Content'; 
$('#div_outgoing_call_dates_rows').append(old_item);

Fiddle here.

Upvotes: 1

Snake Eyes
Snake Eyes

Reputation: 16764

You must select table in order to append a dynamic row, so change selector:

$("#div_outgoing_call_dates_rows table").append(dynamicRow);

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

div_outgoing_call_dates_rows is the div element, you need to append the row to the table inside the div, so use the descendant-selector

$("#div_outgoing_call_dates_rows table").append(dynamicRow);

Upvotes: 1

Related Questions