JQuery driven Dynamic table

Question

I'm trying to create a script where I can:

Add data and append it on the table; and
Edit the data that has been entered.

So far, this is my code:

HTML:

<table class="tbl" style="width: 48%;">
    <tr>
        <td align="center">
            Name</td>
        <td align="center">
            Gender</td>
        <td align="center">
            Contact Number</td>
        <td align="center" width="70px">
            </td>
    </tr>
    <tr>
        <td>
            <input id="txtName" type="text" /></td>
        <td>
            <select id="cmbGender" name="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select></td>
        <td>
            <input id="txtContact" type="text" /></td>
        <td align="middle">
            </td>
    </tr>
    </table>
<button id="btn1">Add</button>

then here's my Javascript:

 $(document).ready(function() {
var num = 0;

    $("#btn1").click(function() {
            num += 1;
        $(".tbl").append("<tr><td>" + $("#txtName").val() + "</td><td>" + $("#cmbGender").val() + "</td><td>" + $("#txtContact").val() +"</td><td><button id=\"edit"+num+"\">Edit</button></td></tr>");
});

for(var i = 1; i <= num; i++) {
    $("#edit"+i).click(function(){
        alert(".tbl tr:eq("+i+")");
        $(".tbl tr:eq("+i+")").append("<tr><td><input type=\"text\" value=\""+$("tr:eq("+i+") td:eq(0)").val()+"\" /></td><td><select><option>Male</option >Male<option></option></select></td><td><input type=\"text\" value=\""+$("tr:eq("+i+") td:eq(2)")+"\" /></td><td></td></tr>");
    });
}
});

Edit : one more thing. It'll be in a form to be processed and sent to the database.

if you need maximum flexibility, do it yourself with css display tables; otherwise, use a plug like in answer below — user1382306
– user1382306, Commented Jan 28, 2013 at 4:46
@ExplosionPills I need a way where once you clicked the edit button on a particular row, that row will be in sort of 'edit mode' (the text changes into textbox, etc.). I'm trying to know how to identify which row the edit button was clicked. — KCD
– KCD, Commented Jan 28, 2013 at 5:08

GreyBeardedGeek · Accepted Answer · 2013-01-28 04:35:35Z

1

I'd suggest using one of the several existing javascript libraries that already do this very well. My favorite is the DataTables jQuery plugin paired with the DataTables Data Manager Plugin or the jEditable plugin

answered Jan 28, 2013 at 4:35

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KCD Over a year ago

I've looked-up on the links that you've provided and I forgot that my code will be inside an html form and thus it'll be inputted by the user. The links you've provided are more of a datagrid view and needs a data source, isn't it?

GreyBeardedGeek Over a year ago

I'm not sure exactly what you mean, but DataTables is extremely flexible - the usage can be as simple as wrapping an existing html table, or you can have a 'client side' data source (e.g. javascript literals), or you can have a server-side data source via ajax.

Collectives™ on Stack Overflow

JQuery driven Dynamic table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related