bh***********@yahoo.com (Bhavin G) writes:
The problem is that what would be a good idea to have a edit window.
2. How will i know which row is clicked.
When you click it, the click event will point to either the row itself,
or one of its children. Find the row and keep it in a global variable.
3. How do i get the values from the row clicked in this new window.
In the new window, "opener" refers to the opening window, and you can
access its global variables, including the one pointing to the correct
row.
4. How do i dynamically create labeles inside that window to edit
because the fields depend on the table.
Labels?
You will know the table structure when you build the page server-side,
so you can generate Javascript that creates a page with the correct
names and number of fields. The simplest way to put content into the
new window is with the window.write function.
Any help will be appreciated. I am so badly behind schedule.
Hire me, it's cheap :)
Try this example code:
---
<html>
<head>
<title>Editable Table</title>
<script type="text/javascript">
/* this is what you need to change */
var tableTitles = ["Data Field 1","Something Else","Third Data"];
var rowEditing = undefined;
var editWindow = undefined;
function editRow(e){
if (rowEditing) { // only one row at a time
if (editWindow && !editWindow.closed) {return false;}
else {
rowEditing = undefined;
editWindow=undefined;
}
}
e = e || window.event; // IE sucks
var tgt = e.target || e.srcElement; // IE sucks
while (tgt && !tgt.cells) {tgt = tgt.parentNode;} // finds tr.
rowEditing = tgt;
editWindow = open("javascript
:''","editWindow","width=180,heigh t=200");
writeEditPage(editWindow.document);
}
function writeEditPage(doc,cells) {
doc.open();
doc.write("<html><head><title>Edit Row "+(rowEditing.rowIndex+1)+
" Values <\/title><\/head>\n");
doc.write("<body onload='opener.populate(document)'>\n<p>\n");
for(var i=0;i<tableTitles.length;i++) {
doc.write("<label for='field"+i+"'>"+tableTitles[i]+
": <input id='field"+i+"' type='text'><\/label>\n");
}
doc.write("<input type='button' onclick='opener.rowCallback(document)'"+
" value='Ok'>");
doc.write("<\/p><\/body><\/html>\n");
doc.close();
}
function populate(doc) {
for(var i=0;i<tableTitles.length;i++) {
doc.getElementById("field"+i).value = rowEditing.cells[i].innerHTML;
}
}
function rowCallback(doc){
if (!rowEditing) {return;} // something is wrong
for(var i=0;i<tableTitles.length;i++) {
rowEditing.cells[i].innerHTML = doc.getElementById("field"+i).value;
}
rowEditing = undefined;
editWindow.close();
}
</script>
</head>
<body>
<table>
<!-- table must have three columns when tableTitles have three elements -->
<thead>
<tr><td>Data Field 1</td><td>Something Else</td><td>Third Data</td></tr>
</thead>
<tbody onclick="editRow(event)">
<tr><td>Row on</td><td>Hello</td><td>There</td></tr>
<tr><td>Row too</td><td>Hello</td><td>Again</td></tr>
<tr><td>Row tree</td><td>Hello</td><td>Larch</td></tr>
<tr><td>Row for</td><td>Hello</td><td>Peace</td></tr>
</tbody>
</table>
</body>
</html>
---
Ask if there is something.
/L
--
Lasse Reichstein Nielsen -
lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
