Question

I have the HTML structure like like:

<button type="button">Add Column Record</button>
<table border="1">
<tr>
    <th> Header 1</th>

    <td> L1</td>
    <td> L1</td>

</tr>
<tr>
<th> Header 2</th>

    <td> L2 </td>
    <td> L2 </td>

</tr>
<tr>
    <th> Header 3</th>

    <td> L3</td>
    <td> L3</td>

</tr>

I want to add a vertical record to the rightest column after pressing a button. How should I implement this effect using jQuery?

Answer 1

You can try something like this:

$('button').on('click', function() {
    var table = $('table');
    var newCell = null;

    table.find('tr').each(function(index) {
        newCell = $('<td/>');
        newCell.text('L' + (index+1));
        $(this).append(newCell);
    });
});

Demo here: http://jsfiddle.net/8RmS8/