469,322 Members | 1,952 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

getting values from html data table to another web page

Hi there ,
I am pretty new at javascripting and i am having this huge problem. I
am using asp.net and C# webapplication.

In my asp.net aspx file I have a place holder for taking an html table
dynamically. I create a html table Time | Data1 | Data2 | Data3 type,
in which the columns are not fixed, hence i am building it dynamically
in c# code.

now after i have the html table in the webpage, I want to give user to
functionality to edit any row that is clicked. I want to open a new
editing window where user can edit the row.

The problem is that what would be a good idea to have a edit window.
2. How will i know which row is clicked.
3. How do i get the values from the row clicked in this new window.
4. How do i dynamically create labeles inside that window to edit
because the fields depend on the table.

Any help will be appreciated. I am so badly behind schedule.

Thanks
Bhavin
Jul 20 '05 #1
2 11047
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.'
Jul 20 '05 #2
In article <86**************************@posting.google.com >,
bh***********@yahoo.com enlightened us with...

The problem is that what would be a good idea to have a edit window.
2. How will i know which row is clicked.
Use onClick.
<tr id="whatever" onClick="whateverFunction()">
<td id="td_1">text</td>
</tr>
3. How do i get the values from the row clicked in this new window. Assuming new browsers only...
window.opener.document.getElementById("td_1").inne rText
4. How do i dynamically create labeles inside that window to edit
because the fields depend on the table.


Pass something as an argument. You can use the url. Say you're going to
open a new window...
window.open("myWindow.aspx?labelling=whatever","my Win","height=
400,width="400");
--
-------------------------------------------------
~kaeli~
Black holes were created when God divided by 0.
Not one shred of evidence supports the notion
that life is serious.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
-------------------------------------------------
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Sam Wuebben | last post: by
reply views Thread by Jim | last post: by
reply views Thread by Jim | last post: by
12 posts views Thread by Lennart Anderson | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.