adding rows dynamically to an html table with

Question

I have a previous html code.

 <table width="600px" cellspacing="0" border="1" id="mainTable">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    full Name
                </th>
                <th>
                    Type
                </th>
            </tr>
            <tr>
                <td>
                    <input id="11" type="text" />
                </td>
                <td>
                    <input id="12" type="text" />
                </td>
                <td>

                    <select id="13">
                    </select>
                </td>
            </tr>
        </table>
        <input type="button" onclick="return btnAddRow_onclick()"/>

i want jquery function that will add row with html elements and with new id. for example, after clicking, will add:

<tr>
                <td>
                    <input id="21" type="text" />
                </td>
                <td>
                    <input id="22" type="text" />
                </td>
                <td>

                    <select id="22">
                    </select>
                </td>
            </tr>

can you add a "template" row, with id="template" setting the display to none. when you want a new row, just copy/clone it and set the id as needed. — scunliffe
– scunliffe, Commented Mar 3, 2010 at 13:43
I know, it's only demo. for quick understanding of my problem. you can read it as 'txt11', txt12'; 'chb13' — loviji
– loviji, Commented Mar 3, 2010 at 13:44

rahul · Accepted Answer · 2010-03-03 13:45:30Z

Something like

<script>
    $(function(){
        var currentID = 1;

        $("#btn1").click(function(){
            currentID ++;
            var htmlToAppend = "<tr><td><input id='txt" + currentID + "1' type='text' /></td><input id='txt" + currentID + "2' type='text' /></td><td><select id='cmb" + currentID + "3'></select></td></tr>";
            $("#mainTable").append ( htmlToAppend );

        });
});
</script>
<table width="600px" cellspacing="0" border="1" id="mainTable">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    full Name
                </th>
                <th>
                    Type
                </th>
            </tr>
            <tr>
                <td>
                    <input id="txt11" type="text" />
                </td>
                <td>
                    <input id="txt12" type="text" />
                </td>
                <td>

                    <select id="cmb13">
                    </select>
                </td>
            </tr>
        </table>
        <input type="button" id="btn1" value="Click me" />

Collectives™ on Stack Overflow

adding rows dynamically to an html table with

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related