Add table row dynamically to an existing table in asp.net MVC 3.0

Question

My existing table looks like this.

<table class="subheader" id="tableTelephone">
    <thead class="subheader">
        <tr>
            <td>
                @Resources.TYPE
            </td>
            <td>
                @Resources.TELEPHONE_NUMBER
            </td>
        </tr>
    </thead>
    <tbody class="subheader">
        @{foreach (Telephone phone in Model.TelephoneList)
        {
        <tr>
             <td>@phone.TelephoneType</td>
             <td>@phone.Number</td> 
        </tr>
        }
    }
    </tbody>
</table>

On a button click I want to fetch values from the text boxes & append to the above existing table. I am using below jquery for the same, but its not working, unless I append an empty TR after the foreach loop.

$('#tableTelephone > tr:last').after("<tr><td>" + type + "</td><td>" + number + "</td></tr>");

The empty is causing issues while retrieving data, so let me know if any solution is there to append the rows (without using a empty tr)

I guess the code block in foreach loop is not allowing to find last tr. — Biki
– Biki, Commented Aug 19, 2011 at 14:17

Rafay · Accepted Answer · 2011-08-19 14:26:36Z

1

$('#tableTelephone').append(

"<tr><td>" + type + "</td><td>" + areaCode + "-" + number + "</td></tr>"
);

DEMO

or

$("<tr/>").append(
$("<td/>").text(type))
   .append($("<td/>").text(areaCode+"-"+number))
   .appendTo("#tableTelephone");

here is the fiddle http://jsfiddle.net/MecUs/2/

jquery .appendTo

Description:
Insert every element in the set of matched elements to the end of the target.

edited Aug 19, 2011 at 14:26

answered Aug 19, 2011 at 14:13

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Biki Over a year ago

It will append after the tbody of my table?

Biki Over a year ago

I tried with ur first option (.append()) & its not working. Its adding the elements, but in proper way i.e. outside the tbody.

Biki Over a year ago

Jsfiddle is indeed a great tool for such RnDs. Thanks.

Collectives™ on Stack Overflow

Add table row dynamically to an existing table in asp.net MVC 3.0

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related