jQuery Tables Generator
===

Hello i am trying to get a delete column and delete row button to work, then also implement http://jqueryui.com/demos/sortable/ to move rows and coloumns around, just wondering how i would go about doing this: This is my HTML:

    <div id="code_table">
    	<form action="table_loop.php" method="post">
    		<table border="2" id="the_table">
    			<thead>
    				<tr>
    					<td><a href="#" action="remove_column" id="1">Remove Column</a></td>
    				</tr>
    			</thead>
    			<tbody>
    			<tr>
    				<td><input type="text" name="value_1[]"/></td>
    			</tr>
    			</tbody>
    		</table>
    		<input type="submit"/>
    	</form>
    	<a href="#" action="add_row">Add Row</a> <a href="#" action="add_column">Add Column</a> 
    </div>

The jQuery to manage that is:

        var table_id = "#the_table";
    
        jQuery.fn.renderTable = function() {
            var rowCount = $(table_id + ' tbody tr').length;
            var colCount = 0;
            $(table_id + ' tbody tr:nth-child(1) td').each(function () {
                if ($(this).attr('colspan')) {
                    colCount += +$(this).attr('colspan');
                } else {
                    colCount++;
                }
            });
    
            if($(this[0]).attr("action") == "add_row") {
                var id = $(table_id + " input[type='text']:last").attr("name");
                id = id.replace(/value_(\d+)/, function(match, number) {
                    return 'value_' + (parseInt(number, 10) + 1);
                });
                var x = 0;
                var result = "<tr>";
                while (x != colCount) {
                    result += '<td><input type="text" name="' + id + '" /></td>';
                    x = x + 1;
                }
                result += "</tr>";
                $(table_id + ' tbody tr:last').after(result);
            }
            if($(this[0]).attr("action") == "add_column") {
                $(table_id + " tbody tr").each(function() {
                    var $this    = $(this),
                        newInput = $("<input/>", {type:"text", name:$this.find('td:last input').attr("name")}),
                        newTD    = $("<td/>").append(newInput);
    
                    $this.append(newTD);
                });
                
                $(table_id + " thead tr").each(function() {
                    var $this    = $(this),
                        newInput = '<a href="#" rel="remove_column">Remove Column</a>',
                        newTD    = $("<td/>").append(newInput);
    
                    $this.append(newTD);
                });
            }
        };
        
        
    
        $('#code_table a').live("click", function(){
            $(this).renderTable();  
            return false;
        });

Please notice that the delete row button isnt in there.. Also with the sortable rows, please note that the name of the input must stay where it is, because this defines the position of the value.

The jsFiddle is here: http://jsfiddle.net/UUytF/

Thanks in advance, hope that made sense to what i want...