Hi,

Sorry I posted this same message to the wrong forum (Beginning Javascript book rather then how-to).

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 but not working
    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>

Hi Pallone!!

This is the solution ,please change ur image,css as per ur requirements
 change "OK" -> to your "Update" label :)


<script>


var editflag=false
var txtfirstnameval,txtlastnameval,txtageval
function editRow(obj)
{

 if(editflag==true)
  return;

    editflag=true
    objid=obj.id
    objidvalue=objid.substring(("imEdit").length,objid .length)



    divfname=document.getElementById("divfname"+objidv alue)
    divfname_value=divfname.innerHTML
    txtfirstnameval=divfname_value
    inp=document.createElement("input")
    inp.type="text"
    inp.id="txtfname"+objidvalue
    inp.value=divfname_value
    inp.size="13"
    divfname.innerHTML=""
    divfname.appendChild(inp)



    divlname=document.getElementById("divlname"+objidv alue)
    divlname_value=divlname.innerHTML
    txtlastnameval=divlname_value
    inp=document.createElement("input")
    inp.type="text"
    inp.id="txtlname"+objidvalue
    inp.value=divlname_value
    inp.size="13"
    divlname.innerHTML=""
    divlname.appendChild(inp)


    divage=document.getElementById("divage"+objidvalue )
    divage_value=divage.innerHTML
    txtageval=divage_value
    inp=document.createElement("input")
    inp.type="text"
    inp.id="txtage"+objidvalue
    inp.value=divage_value
    inp.size="13"
    divage.innerHTML=""
    divage.appendChild(inp)



  divaction=document.getElementById("actionarea"+obj idvalue)
  divaction.innerHTML=""

  bttnOk=document.createElement("input")
  bttnOk.type="button"
  bttnOk.value="OK"
  bttnOk.id="OK"+objidvalue
  bttnOk.onclick = function() { updateRow(objidvalue) };

  divaction.appendChild(bttnOk)


  bttnCancel=document.createElement("input")
  bttnCancel.type="button"
  bttnCancel.value="Cancel"
  bttnCancel.id="Cancel"+objidvalue
  bttnCancel.onclick = function() { cancelRow(objidvalue) };

  divaction.appendChild(bttnCancel)

  document.getElementById("txtfname"+objidvalue).foc us();
 // document.getElementById("txtfname"+objidvalue).sel ect();

}

function updateRow(objidvalue)
{
 divfname=document.getElementById("divfname"+objidv alue)
 txtfirstnameval=document.getElementById("txtfname" +objidvalue).value
 divfname.innerHTML=""
 divfname.innerHTML=txtfirstnameval

 divlname=document.getElementById("divlname"+objidv alue)
 txtlastnameval=document.getElementById("txtlname"+ objidvalue).value
 divlname.innerHTML=""
 divlname.innerHTML=txtlastnameval

 divage=document.getElementById("divage"+objidvalue )
 txtageval=document.getElementById("txtage"+objidva lue).value
 divage.innerHTML=""
 divage.innerHTML=txtageval


 divaction=document.getElementById("actionarea"+obj idvalue)
 divaction.innerHTML=""

  bttnEdit=document.createElement("input")
  bttnEdit.type="button"
  bttnEdit.value="Edit"
  bttnEdit.id="imEdit"+objidvalue
  bttnEdit.onclick = function() { editRow(this) };
  divaction.appendChild(bttnEdit)

editflag=false;
}

function cancelRow(objidvalue)
{

 divfname=document.getElementById("divfname"+objidv alue)
 divfname.innerHTML=txtfirstnameval

 divlname=document.getElementById("divlname"+objidv alue)
 divlname.innerHTML=txtlastnameval

 divage=document.getElementById("divage"+objidvalue )
 divage.innerHTML=txtageval

 divaction=document.getElementById("actionarea"+obj idvalue)
 divaction.innerHTML=""

  bttnEdit=document.createElement("input")
  bttnEdit.type="button"
  bttnEdit.value="Edit"
  bttnEdit.id="imEdit"+objidvalue
  bttnEdit.onclick = function() { editRow(this) };
  divaction.appendChild(bttnEdit)

editflag=false;
}


</script>

<table border="1" class="grdMain" id="tblAdVersions" border="0" cellpadding="0" cellspacing="1">
<tbody>

<tr bgcolor="#7FFFFF">
<td bgcolor="#55FF00">NonEditable</td>
<td>FirstName-Editable</td>
<td>LastName-Editable</td>
<td>Age-Editable</td>
<td>&nbsp;</td>
</tr>
<tr id="tr1">

    <td> <nobr>
    <div style="width: 150px; overflow: hidden;"> RLPX00041 </div>
    </nobr> </td>

    <td> <nobr>
    <div id="divfname1" style="width: 185px; overflow: hidden;"> FirstName1 </div>
    </nobr> </td>

<td> <nobr>
    <div id="divlname1" style="width: 185px; overflow: hidden;"> LastName1 </div>
    </nobr> </td>


    <td> <nobr>
    <div id="divage1" style="width: 200px; overflow: hidden;"> To be defined </div>
    </nobr> </td>

    <td> <nobr>

    <div title="Actions" id="actionarea1" style="">
       <input type=button value="Edit"
     id="imEdit1" title="edit" style="cursor: pointer;" onclick="editRow(this)" >
        </nobr>
     </td>

</tr>


<tr id="tr2">

    <td> <nobr>
    <div style="width: 150px; overflow: hidden;"> RLPX00042 </div>
    </nobr> </td>

    <td> <nobr>
    <div id="divfname2" style="width: 185px; overflow: hidden;"> FirstName2 </div>
    </nobr> </td>

<td> <nobr>
    <div id="divlname2" style="width: 185px; overflow: hidden;"> LastName2 </div>
    </nobr> </td>


    <td> <nobr>
    <div id="divage2" style="width: 200px; overflow: hidden;"> To be defined </div>
    </nobr> </td>

    <td> <nobr>

    <div title="Actions" id="actionarea2" style="">
       <input type=button value="Edit"
     id="imEdit2" title="edit" style="cursor: pointer;" onclick="editRow(this)" >
        </nobr>
     </td>

</tr>



<tr id="tr3">

    <td> <nobr>
    <div style="width: 150px; overflow: hidden;"> RLPX00043 </div>
    </nobr> </td>

    <td> <nobr>
    <div id="divfname3" style="width: 185px; overflow: hidden;"> FirstName3 </div>
    </nobr> </td>

<td> <nobr>
    <div id="divlname3" style="width: 185px; overflow: hidden;"> LastName3 </div>
    </nobr> </td>


    <td> <nobr>
    <div id="divage3" style="width: 200px; overflow: hidden;"> To be defined </div>
    </nobr> </td>

    <td> <nobr>

    <div title="Actions" id="actionarea3" style="">
       <input type=button value="Edit"
     id="imEdit3" title="edit" style="cursor: pointer;" onclick="editRow(this)" >
        </nobr>
     </td>

</tr>



<tr id="tr4">

    <td> <nobr>
    <div style="width: 150px; overflow: hidden;"> RLPX00044 </div>
    </nobr> </td>

    <td> <nobr>
    <div id="divfname4" style="width: 185px; overflow: hidden;"> FirstName4 </div>
    </nobr> </td>

<td> <nobr>
    <div id="divlname4" style="width: 185px; overflow: hidden;"> LastName4 </div>
    </nobr> </td>


    <td> <nobr>
    <div id="divage4" style="width: 200px; overflow: hidden;"> To be defined </div>
    </nobr> </td>

    <td> <nobr>

    <div title="Actions" id="actionarea4" style="">
       <input type=button value="Edit"
     id="imEdit4" title="edit" style="cursor: pointer;" onclick="editRow(this)" >
        </nobr>
     </td>

</tr>





</tbody>
</table>

Hope this will help you :)

Cheers :)

vinod

Hi vinod,

Many thanks for you help. Your are a real star.

I would appreciate if you could give us a little explanation of how the javascript works if possible.

Again your help is very much appreciated

Cheers,

Hi Pallone!!
  Thanks for your appreciation .
Well I am a student in IT and always want to learn do some R& D.
Let i explain current solution in detail.

initially you have created row 1,2, 3,...
define each editable field in div tag.
define the Edit button in div tag.
When user click on the Edit button ,based on the id of Edit button ,
found which row number user clicked.
now we have id of row ,now copy the contents of that row in var txtfirstnameval,txtlastnameval,txtageval variables since user can click on the "Cancel " button.Same created textbox in editable cells so that user can edit them.

now ,in div tag where there was "Edit" button ,create two button "Ok" and "update" button.
Since user can edit only one row ,using editfalg we allowed only one row edition in a time.

When user clicks on the "ok" button ,again copy the text fields in to div fields values .

Similiar updateRow and cancelRow function works.

Hope this will help you .You are always welcome.You are really a great programmer.




Cheers :)

vinod

Hi vinod,

Thanks for your explanation.
I am going through the code now to try and understand it..

I was just wondering how difficult it would be to also implement "in place editing" i.e. if the user click on a td then only that td goes into edit mode not the whole grid!!!

But anyway thanks a lot again

Cheers

It certainly is, take a look at the following article :

http://builder.com.com/5100-6370_14-5533726-1-1.html