jQuery dynamic table creation

Okay, here’s what I’m trying to do:
I’m dynamically creating a table. I create the <tr>s with five <td>s.
I then remove the third <td> and would like to add the cell variable where I removed the td.

The creation of the table works, the removal of the td works, now how do I add the cell var where I removed the td?

example here: http://www.search-this.com/examples/test/dynamicTable.htm


function CreateTable() {
        var array = ["one", "two", "three", "four", "five", "six", "seven", "eight", "one", "one", "three", "seven"];
        var listItems = "";
        var tbody = $('.tbody');
        var cell = $('<td>', {
            className: 'open',
            html: 'Open'
        });

        $.each(array, function(index, val) {

            var row = jQuery('<tr></tr>')
                        .append('<td>' + index + ' - ' + val + '</td><td> open </td><td> open </td><td> open </td><td> open </td>');

            $('td:eq(2)', row).css('background-color', '#eee');
            $('td:eq(2)', row).remove();

            row = row.add(cell);
            
            row.appendTo(tbody);
        });
        
        
    }

you can use replaceWith() instead of remove() and after():

$(‘td:eq(2)’, row).replaceWith(‘<td>added</td>’)​;

regards

looks like this works:

        $('td:eq(2)', row).remove();
        $('td:eq(2)', row).after('&lt;td&gt;added&lt;/td&gt;');