...

View Full Version : Assigning table cell value to text field



rpjd
06-16-2010, 03:57 PM
I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column.
I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens.
I have


document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML
Any ideas?

d_s
06-16-2010, 07:31 PM
Hi,

try this code, it works. you can change the id's too to suit your designs. I have used jQuery for this purpose. do try it and leave me a feedback.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo Page</title>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">

$(document).ready( function () {

$("#tbl tr td").mouseover( function () {
var ids = $(this).attr("id");
var vals = parseInt(ids.substring(ids.length-2,ids.length-1));
if(vals>=1)
{
vals--;
var newid = ids.substring(0,3)+vals+ids.substring(ids.length-1,ids.length);
$("#text1").attr("value",$("#"+ids).attr("innerHTML"));
$("#text2").attr("value",$("#"+newid).attr("innerHTML"));
}
else if(vals<=0)
{
$("#text1").attr("value",document.getElementById(ids).innerHTML);
$("#text2").attr("value",0);
}
});

});

</script>

</head>
<body>
<div id="d1">
asdf
</div>
<table id="tbl" border="1">
<tr>
<td id="col00">
0
</td>
<td id="col01">
1
</td>
<td id="col02">
2
</td>
</tr>
<tr>
<td id="col10">
3
</td>
<td id="col11">
4
</td>
<td id="col12">
5
</td>
</tr>
<tr>
<td id="col20">
6
</td>
<td id="col21">
7
</td>
<td id="col22">
8
</td>
</tr>
</table>
<br />
<br />
<input id="text1" type="text" />
<input id="text2" type="text" />
</body>
</html>

In case of any further queries, do checkout my blog at : http://www.dsaravanan.wordpress.com/javascript/

Regards,

d_s.


I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column.
I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens.
I have


document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML
Any ideas?

rpjd
06-17-2010, 02:46 PM
I have no understanding of JQuery. I'm familiar with javascript, somewhat at least. My table cells have no individual id's, I'm using getElementsByTagName to access the <th> and <td> tags, then using a for loop to iterate through them. When I've found the necessary <th> or first column <td> I change the style of the cell. While I have access to the cell in question, I want to assign the contents of the cell to a text field outside the table. I'm hoping javascript can accomplish this task.
Col1Cell[0] // first cell in row of current cell
Header[n] // cell in top row and column[n] of current cell
Col1Cell[0].innerHTML // accesses contents of first cell in current row.
Header[n].innerHTML // accesses contents of cell [n] in top row of of current column.
I was thinking this would work:


Col1Cell[o].innerHTML = document.getElementById("tableID").textfieldID.value;

Ive tested the innerHTML with an alert and it shows the contents. I can't see why the assignment part won't work. Any help appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum