469,364 Members | 2,332 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,364 developers. It's quick & easy.

Making a table row editable?

Hi All,

I have a web page that presents records in a table, with one row per
record.

I'd like to put an edit button next to each record, such that if a user
clicks on the edit button next to a particular record, that record
becomes an editable form.

I'm assuming this can be achieved via JavaScript, and I'm wondering if
anyone can point me at any online resources that might step me through
achieving this, as my Google-Fu is turning very high noise-to-signal.

Many thanks in advance,

pt

Nov 10 '06 #1
1 4725
planetthoughtful wrote:
Hi All,

I have a web page that presents records in a table, with one row per
record.

I'd like to put an edit button next to each record, such that if a user
clicks on the edit button next to a particular record, that record
becomes an editable form.
Is your "record" the contents of a cell, or the entire row?

I'm assuming this can be achieved via JavaScript, and I'm wondering if
anyone can point me at any online resources that might step me through
achieving this, as my Google-Fu is turning very high noise-to-signal.
The simplest implementation would be for a click on a cell to pop-up a
prompt with the content of the cell as its value. The user modifies
the value and the result is put back into the cell.

You could extend that significantly to putting the content of the row
into a pop-up table, use the table header to label fields, fill field
content from the row, make them editable based on a class attribute in
the original table, then drop the new values back into the form when
the user is finished (and allow a cancel too of course).

You want to investigate:

- the onclick event to make things happen
- creating elements so you can do the pop-up thing
- referencing elements so you can get the content from the table and
write it back when you're finished
- deleting elements so you can destroy the pop-up when you're
finished.

You will also want to checkout methods for sending the data back to the
sever. You might have a hidden form that you submit with changes, or
the entire table could be a form and you send back the whole lot.

This really is a bit of "how long is a piece of string" question.

Here's something really basic to start you off, the text inputs should
be type="hidden", I've left them as text so you can see what's
happening.

<script type="text/javascript">
function editEl(el){
var elText = el.innerHTML;
var dbField = el.className;
elText = prompt('Please enter a new value:', elText);
el.innerHTML = elText;
document.forms['personDetails'].elements[dbField].value = elText;
}

</script>

<table>
<tr><th>name</th><th>Age</th>
<tr>
<td class="personName" onclick="editEl(this);">Fred
<td class="personAge" onclick="editEl(this);">47
</table>
<form action="" name="personDetails" id="personDetails"><div>
<input type="text" name="personName"><br>
<input type="text" name="personAge"><br>
<input type="submit" value="Transmit changes..."></div>
</form>
HTH :-)
--
Fred

Nov 10 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Stephan Bour | last post: by
4 posts views Thread by biswaranjan.rath | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.