Edit a row in jQuery and dynamic id issue?

This table is in the loop. That is number of rows is dynamic.

<tr id="data">
    <td><input name="cb" type="checkbox" value="val"></td>
    <td>var 1</td>
    <td>var 2</td>
    <td>var 3</td>
</tr>

One edit button:

<input type="submit" v开发者_开发技巧alue="edit" id="edit">

Each row has a checkbox. On click of the checkbox the entire row should be in the edit mode. I tried a lot of ways but still far away from the result. The second issue I faced is the id issue. Because the rows are dynamic so...

Probably what you are looking for is this, it uses a thing called "contentEditable" property, which enables editing HTML documents:

http://valums.com/edit-in-place/

More info can be found here: http://msdn.microsoft.com/en-us/library/ms537837%28v=vs.85%29.aspx

You say

This table is in the loop...

but you also have

<tr id="data">

id values must be unique within the document, so you'll have to modify that to not use ids.

But you don't need an id on each row. You can do this:

$('selector_for_the_table tr input[type=checkbox]').change(function() {

    var row = $(this).closest('tr');
    if (this.checked) {
        // make the row editable
    }
    else {
        // make the row uneditable
    }
});

Live example

$("input[name=checkbox_name").bind('onchange',function(){
$(this).parent('tr').html();//This line fetch current tr to edit 
});