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

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 +开发者_JS百科 "</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)

$('#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.