writing to a give table element

mxa · Dec 20, 2004

Hi,
given table :
<table id='t1'>
<tr><td> data1</td><td>data2</td></tr>
</table>

i would like to write a function to write and change data2
( location is fixed ).

function changeme () {

document.write('new data2');

}

how can I focus on 'data2' before calling the above function?
thanks
Michael

RobB · Dec 20, 2004

Hi,
given table :
<table id='t1'>
<tr><td> data1</td><td>data2</td></tr>
</table>

i would like to write a function to write and change data2
( location is fixed ).

function changeme () {

document.write('new data2');

}

how can I focus on 'data2' before calling the above function?
thanks
Michael

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
//<![CDATA[

function changeme()
{
var tbl = document.getElementById('t1'); //table
var firstrow = tbl.rows.item(0); //row 1 (DOM: 0)
var cell2 = firstrow.cells.item(1); //2nd TD
while (cell2.hasChildNodes()) //anything in there?
cell2.removeChild(cell2.lastChild); //adios
cell2.appendChild(document.createTextNode('new data2')); //new text
node, add
}

onload = function()
{
setTimeout(changeme, 3000);
}

//]]>
</script>
</head>
<body>
<table id="t1" cellspacing="10">
<tbody style="font:32px tahoma;">
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</tbody>
</table>
</body>
</html>

http://www.sitepoint.com/article/rough-guide-dom

RobB · Dec 20, 2004

Just a note: could also go -

var tbody =
document.getElementById('t1').getElementsByTagName('tbody').item(0);
var firstrow = tbody.rows.item(0);
Another ref:

http://www.brainjar.com/dhtml/intro/

Fred Oz · Dec 20, 2004

RobB wrote:
[...]

Now there's an easy way and a hard way...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Change Data2</title>

<script type="text/javascript">
function changeme(ele,str) {
var tbl = document.getElementById(ele);
t1.innerHTML = str;
}
</script>

</head>
<body>
<table cellspacing="10">
<tbody style="font:32px tahoma;">
<tr>
<td>data1</td>
<td id="t1">data2</td>
</tr>
</tbody>
</table>

<div onclick="changeme('t1','Here is the new text');" style="
font-family: tahoma;
border: 1px solid blue;
background-color: #ddddee;
width: 20em;">Click here to to change the text</div>
</body>
</html>

I reckon that's the easy way!

Of course, getElementsById is not compatible with older browsers and
innerHTML, whilst well supported, is not part of the official DOM. So
if this is for real web use, let us know and we'll post something a bit
more robust (but it'll take a few more lines of code...)

Fred Oz · Dec 20, 2004

Fred said:
RobB wrote: [...]
<script type="text/javascript">
function changeme(ele,str) {
var tbl = document.getElementById(ele);
t1.innerHTML = str;
}
</script>

Believe it or not, the above rubbish worked in Safari. My apologies,
the correct code is below.

<script type="text/javascript">
function changeme(ele,str) {
var d = document.getElementById(ele);
d.innerHTML = str;
}
</script>

RobB · Dec 20, 2004

Fred said:
Fred said:

RobB wrote: [...]
<script type="text/javascript">
function changeme(ele,str) {
var tbl = document.getElementById(ele);
t1.innerHTML = str;
}
</script>

Click to expand...

Believe it or not, the above rubbish worked in Safari. My apologies,
the correct code is below.

<script type="text/javascript">
function changeme(ele,str) {
var d = document.getElementById(ele);
d.innerHTML = str;
}
</script>

Fred:
some leisure reading.

http://www.developer-x.com/content/innerhtml/

Image shifts to the right when export the page to pdf	4	May 5, 2023
How can I create a table using the input element?	1	Mar 25, 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
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Script to send email not working	1	Apr 10, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Only one table shows up with the information	2	Mar 29, 2023

writing to a give table element

mxa

RobB

RobB

Fred Oz

Fred Oz

RobB

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads