How to do dynamic html table on JS with jQuery? For example I must have 6 buttons:

• Add row to begin table;
• Add row to middle;
• Add row to end;
• Delete first row;
• Delete middle row;
• Delete last row;

UPD:

That's my JS:

$(document).ready(function(){
        $('#addFirstPosition').click(function(){
            var $tr = $('<tr><td>3</td><td>3</td></tr>');
            //var $myTable = $('#myTable');
            //$myTable.append($tr);
            $("#myTable > tbody").append($tr);
        );
        });

And this is my html:

<input id="addFirstPosition" type="button" value="AddFirst" />
<input id="addMiddlePosition" type="button" value="AddMiddle" />
<input id="addLastPosition" type="button" value="AddLast" />
<br />
<input id="deleteFirstPosition" type="button" value="DelFirst" />
<input id="deleteMiddlePosition" type="button" value="DelMiddle" />
<input id="deleteLastPosition" type="button" value="DelLast" />
<br />
<br />
<table id="myTable" border="1px">
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                1
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                2
            </td>
        </tr>
    </tbody>
</table>

When I click to button, nothing happens.

How to do dynamic html table on JS with jQuery? For example I must have 6 buttons:

• Add row to begin table;
• Add row to middle;
• Add row to end;
• Delete first row;
• Delete middle row;
• Delete last row;

UPD:

That's my JS:

$(document).ready(function(){
        $('#addFirstPosition').click(function(){
            var $tr = $('<tr><td>3</td><td>3</td></tr>');
            //var $myTable = $('#myTable');
            //$myTable.append($tr);
            $("#myTable > tbody").append($tr);
        );
        });

And this is my html:

<input id="addFirstPosition" type="button" value="AddFirst" />
<input id="addMiddlePosition" type="button" value="AddMiddle" />
<input id="addLastPosition" type="button" value="AddLast" />
<br />
<input id="deleteFirstPosition" type="button" value="DelFirst" />
<input id="deleteMiddlePosition" type="button" value="DelMiddle" />
<input id="deleteLastPosition" type="button" value="DelLast" />
<br />
<br />
<table id="myTable" border="1px">
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                1
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                2
            </td>
        </tr>
    </tbody>
</table>

When I click to button, nothing happens.

• javascript
• jquery
• html
• dynamic

• 4 and what have you tried? – Fabrizio Calderan Commented May 18, 2012 at 9:22
• Hav u tried somethin? U need to post ur code to get help from here. – Shreedhar Commented May 18, 2012 at 9:24
• I didn't post code, because maybe my code have global fault, and I doing wrong way. That's why I posted this without code, because maybe someone show more best way. But ok, I understand this rule. I'll update topic. – Smit Commented May 18, 2012 at 14:19
• as a generate note, if a button is not in a form you should be using the button tag instead of input. with your limited code it cannot be seen whether this is all in a form or not. <button type='button' id='someId'>value</button> – rlemon Commented May 19, 2012 at 12:47

2 Answers 2

going by the format in which u have asked this ques search for the rows by doing a $(tr); then use

.append(); for adding to the last
.prepend(); for adding to the first
select an elemnt by doint $(tr).eq(index).after() to add in between

after you have selected the row which you can do by

var r = $(tr).eq(index)

to delete you can do

r.remove()

no matter where you row is present

There were errors in your js code:

$(document).ready(function() {
    $('#addFirstPosition').click(function() {
        var $tr = $('<tr><td>3</td><td>3</td></tr>');;
        $("#myTable > tbody").append($tr);
    });// I WAS MISSING A } BEFORE );
});​

brackets missing or in the wrong places. The code above is corrected and I mented on the mistake.

demo here

but Parv Sharma had some good points in his/her answer.