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
