bh***********@y ahoo.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>Editab le Table</title>
<script type="text/javascript">
/* this is what you need to change */
var tableTitles = ["Data Field 1","Somethin g Else","Third Data"];
var rowEditing = undefined;
var editWindow = undefined;
function editRow(e){
if (rowEditing) { // only one row at a time
if (editWindow && !editWindow.clo sed) {return false;}
else {
rowEditing = undefined;
editWindow=unde fined;
}
}
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("javascrip t:''","editWind ow","width=180, height=200");
writeEditPage(e ditWindow.docum ent);
}
function writeEditPage(d oc,cells) {
doc.open();
doc.write("<htm l><head><title> Edit Row "+(rowEditing.r owIndex+1)+
" Values <\/title><\/head>\n");
doc.write("<bod y onload='opener. populate(docume nt)'>\n<p>\n");
for(var i=0;i<tableTitl es.length;i++) {
doc.write("<lab el for='field"+i+" '>"+tableTitle s[i]+
": <input id='field"+i+"' type='text'><\/label>\n");
}
doc.write("<inp ut type='button' onclick='opener .rowCallback(do cument)'"+
" value='Ok'>");
doc.write("<\/p><\/body><\/html>\n");
doc.close();
}
function populate(doc) {
for(var i=0;i<tableTitl es.length;i++) {
doc.getElementB yId("field"+i). value = rowEditing.cell s[i].innerHTML;
}
}
function rowCallback(doc ){
if (!rowEditing) {return;} // something is wrong
for(var i=0;i<tableTitl es.length;i++) {
rowEditing.cell s[i].innerHTML = doc.getElementB yId("field"+i). value;
}
rowEditing = undefined;
editWindow.clos e();
}
</script>
</head>
<body>
<table>
<!-- table must have three columns when tableTitles have three elements -->
<thead>
<tr><td>Data Field 1</td><td>Somethin g Else</td><td>Third Data</td></tr>
</thead>
<tbody onclick="editRo w(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.'
