Wrox Programmer Forums
|
BOOK: Beginning JavaScript
This is the forum to discuss the Wrox book Beginning JavaScript by Paul Wilton; ISBN: 9780764544057
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning JavaScript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 13th, 2006, 02:48 PM
Friend of Wrox
 
Join Date: Oct 2003
Posts: 290
Thanks: 24
Thanked 0 Times in 0 Posts
Default EDIT AND TAB IN TABLE

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>

 
Old January 21st, 2006, 05:29 AM
Friend of Wrox
 
Join Date: Oct 2004
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi Pallone!!
Visit the link for your solution

http://p2p.wrox.com/topic.asp?TOPIC_ID=38697
 Hope this will help you :)

Cheers :)

vinod





Similar Threads
Thread Thread Starter Forum Replies Last Post
Edit Access Table in Excel (2003) kewldude_3001 Access 0 April 10th, 2008 02:26 PM
Edit Table through a Form Coby Access VBA 3 August 17th, 2007 07:10 AM
CH 6 (edit the table) mekanaren BOOK: Beginning PHP5, Apache, and MySQL Web Development ISBN: 978-0-7645-7966-0 0 October 27th, 2006 09:40 AM
TAB AND EDIT pallone Javascript How-To 5 January 27th, 2006 08:18 PM
Edit value from Table acdsky Classic ASP Databases 1 June 28th, 2004 10:11 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.