Hi,
I cannot figure out how to make a row in a table editable with javascript.
When they click the edit button (found in last td in table please see below) I would like to place the cursor in the first cell of the row and allow user to edit the value already in the cell. Also, the first button should change to an ok button and the second to a cancel button.
Then when user clicks the tab key they would move to the next cell in the same row and edit it and so on.
No other key should work because the user is only allowed to to leave editable mode when he clicks the cancel button.
This is what I have done so far and would appreicate your help and input.
Cheers
<script>
function editRow(el)
{
var im1 = document.getElementById("imEdit")
var im2 = document.getElementById("imDel")
im1.src = "ok.gif"
im2.src = "cancel.gif"
c=el.innerHTML// get the current content of the cell
inp=document.createElement("input")
inp.type="text"
inp.className="inpWght"
inp.value=c
inp.size="3"
inp.onblur=function(){closeEdit(this)}
el.removeChild(el.firstChild)
el.appendChild(inp)
inp.focus()
}
</script>
<table border="1" class="grdMain" id="tblAdVersions" border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr id="tr1">
<td> <nobr>
<div title="RLPX00041" style="width: 150px; overflow: hidden;"> RLPX00041 </div>
</nobr> </td>
<td> <nobr>
<div title="RE212921" style="width: 185px; overflow: hidden;"> RE212921 </div>
</nobr> </td>
<td> <nobr>
<div title="Rebif Across America" style="width: 200px; overflow: hidden;"> To be defined </div>
</nobr> </td>
<td> <nobr>
<div title="Actions" style=""> <img id="imEdit" title="edit" style="cursor: pointer;" onclick="editRow(this)" src="../App_Themes/theme1/buttons/pencil3.png"> <img id="imDel" title="delete" style="cursor: pointer;" onclick="delNode('1')" src="../App_Themes/theme1/buttons/del.png"> </div>
</nobr> </td>
</tr>
</tbody>
</table>
|
