getting values from html data table to another web page

Bhavin G · Jul 23, 2003

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

Lasse Reichstein Nielsen · Jul 23, 2003

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,height=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+
": <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.innerHTML;
}
}

function rowCallback(doc){
if (!rowEditing) {return;} // something is wrong
for(var i=0;i<tableTitles.length;i++) {
rowEditing.cells.innerHTML = doc.getElementById("field"+i).value;
}
rowEditing = undefined;
editWindow.close();
}
</script>
</head>
<body>
<table>

<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>

kaeli · Jul 23, 2003

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>

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").innerText

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","myWin","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
-------------------------------------------------

How to push data from one HTML page to another	4	Jan 3, 2024
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Trying to get JSON data from API into HTML table	7	Feb 1, 2021
Getting extra blank rows from appending HTML..?	2	Oct 24, 2023
Sending data from web page to Raspberry Pi	0	Nov 26, 2022
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
CORS/Express: Getting data from server from domain html	2	Sep 3, 2022
How to add dropdown selected data to table using jquery	2	Jul 2, 2022

getting values from html data table to another web page

Bhavin G

Lasse Reichstein Nielsen

kaeli

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads