remove readonly attribute of input box

[Priti_P]

Hello,
I have created input bonxes and filled values inside it.
and made it read only
using below code:

<?
foreach($certificated_data as $c)
    {
?>
    <tr id=<?echo $tr_id; ?> >
        <td>
            <input type ="textbox" name="certificate[<?=$tr_id?>]['name']" id="name-<?=$tr_id?>" value="<?=$c['Name'] ?>" readonly="readonly" />
        </td>
        <td>
            <input type ="textbox" name="certificate[<?=$tr_id?>]['date']" id="date-<?=$tr_id?>" value="<?=$c['year'] ?>" readonly="readonly"/></td>
        <td>
            <img width="15" style="background-color:red" height="15" id="edit" alt="Edit certification" onclick="edit_row(this)" src="/employee_skill_set_priti_2/images/update1.jpeg">
        </td>
    </tr>
<?
    $tr_id=$tr_id+1;
}
?>

Now what i want is,
onclick of i.e in edit_row(this) function, make that row editable by removing readonly attribute.
function edit_row(this) is like:

function edit_row(r)
    {
        var i = r.parentNode.parentNode.rowIndex;
        var total_rows=document.getElementById('certificates_table').rows.length;
        total_rows=total_rows-1; // we have hardcodly written 1 row
        name_id="name-"+ (i-1);
        date_id="date-"+ (i-1);

        //make all fields disbaled
        for(var disable_row=0 ;disable_row<total_rows ;disable_row++)
        {
            $("#name-"+(disable_row)).attr('readonly', true);
            $("#date-"+(disable_row)).attr('readonly', true);
        }

        // make only this tr editable
        $("#name-"+(disable_row)).removeAttr('readonly',false);
        $("#name-"+(disable_row)).removeAttr('readonly',false);
    }

but it is not working.
what's wrong in this?

[Airshow]

It's difficult to answer questions like this when the HTML is in the form of server-side source code (PHP presumably).

Please post the served HTML!

[Taywin]

One question, why do you put readonly attribute to the field if you will allow users to edit anyway using onclick? What's the benefit of that? Wouldn't it be easier to use CSS on the field so that the field does not look like editable, and then changed it back to default when onclick?

[AleMonteiro]

You should really take in consideration what Taywin and Airshow said.

Nevertheless, try this:

//make all fields disbaled
$("#youTableID").find("input:text").attr("readonly", true);

// make only this tr editable
$("#tr-"+(disable_row)).find("input:text").removeAttr('readonly');

And when generating the tr

<tr id=tr-<?echo $tr_id; ?> >

And another thing, there's no such input type textbox, it's just text

<input type ="text" />