|
Subject:
|
TAB AND EDIT
|
|
Posted By:
|
pallone
|
Post Date:
|
1/13/2006 5:55:33 PM
|
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>
|
|
Reply By:
|
vinod_yadav1919
|
Reply Date:
|
1/21/2006 4:28:36 AM
|
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"+objidvalue)
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"+objidvalue)
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"+objidvalue)
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).focus();
// document.getElementById("txtfname"+objidvalue).select();
}
function updateRow(objidvalue)
{
divfname=document.getElementById("divfname"+objidvalue)
txtfirstnameval=document.getElementById("txtfname"+objidvalue).value
divfname.innerHTML=""
divfname.innerHTML=txtfirstnameval
divlname=document.getElementById("divlname"+objidvalue)
txtlastnameval=document.getElementById("txtlname"+objidvalue).value
divlname.innerHTML=""
divlname.innerHTML=txtlastnameval
divage=document.getElementById("divage"+objidvalue)
txtageval=document.getElementById("txtage"+objidvalue).value
divage.innerHTML=""
divage.innerHTML=txtageval
divaction=document.getElementById("actionarea"+objidvalue)
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"+objidvalue)
divfname.innerHTML=txtfirstnameval
divlname=document.getElementById("divlname"+objidvalue)
divlname.innerHTML=txtlastnameval
divage=document.getElementById("divage"+objidvalue)
divage.innerHTML=txtageval
divaction=document.getElementById("actionarea"+objidvalue)
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> </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
|
|
Reply By:
|
pallone
|
Reply Date:
|
1/21/2006 11:32:45 AM
|
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,
|
|
Reply By:
|
vinod_yadav1919
|
Reply Date:
|
1/22/2006 7:09:58 AM
|
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
|
|
Reply By:
|
pallone
|
Reply Date:
|
1/24/2006 7:41:24 PM
|
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
|
|
Reply By:
|
Greg Griffiths
|
Reply Date:
|
1/27/2006 7:18:34 PM
|
It certainly is, take a look at the following article :
http://builder.com.com/5100-6370_14-5533726-1-1.html
|
