Function to write to various table cells. [Archive]

Bernie

10-30-2003, 10:54 PM

I am attempting to create a function, activated by the onclick action of a button, that will write to various table cells without using form text boxes.

Currently the function uses this statement to write to a textbox.

document.form1.mytext.value=text[indx];

where mytext is a textbox in form1.

I would much prefer to write directly a cell in a table. I would appreciate any help as I'm relatively new to both HTML and JavaScript.

Thanks, Bernie

MikoLone

10-30-2003, 11:39 PM

You can do reference it this way.

document.all.hello.innerHTML = "<p>blah blah blah blah</p>";

or this way

document.all["hello"].innerHTML = "<p>blah blah blah blah</p>";

here is my table.
<table width="75%" border="1" id="theTable">
<tr>
<td id="hello"> </td>
<td > </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

have no idea if it works in all the browsers or anything like that. But this way you can just add the text into the table.

function change(){
document.all.hello.innerHTML = "<p>blah blah blah blah</p>";
}

Willy Duitt

10-31-2003, 12:06 AM

Here's an example:

<script type="text/javascript">

function getobject(obj){
if (document.getElementById)
return document.getElementById(obj)
else if (document.all)
return document.all[obj]
}

function passValues(){
getobject("span1").innerHTML = document.form1.myText1.value;
getobject("span2").innerHTML = document.form1.myText2.value;
}

</script>
</HEAD>

<BODY>
<table border="0" cellpadding="0" cellspacing="0" width="680">
<tr>
<td align="left" valign="middle" width="600">
<b>Span1 contents=</b><span id="span1"></span>
</td>
</tr>
<tr>
<td align="left" valign="middle" width="600">
<b>Span1 contents=</b><span id="span2"></span>
</td>
</tr>
</table>

<form name="form1">
<input type="text" ID="myText1" size="21" value="Pass this Value to span1" /><br />
<input type="text" ID="myText2" size="21" value="Pass this Value to span2" /><br />
<input type="button" name="myButton" value="Pass This Value" onClick="passValues()" />
</form>

.....Willy

Bernie

10-31-2003, 12:11 AM

MikoLone,

Thanks, that did the trick! I don't have the entire script running, but I've debugged enough to know that you've resolved my question.

Thanks again, Bernie

Bernie

10-31-2003, 12:17 AM

Willy,

Thank you too! As I was testing and responding to MikoLone, your reply came in. There are some similarities, but enough differences that a student like me has a real learning opportunity.

Thanks, again, Bernie

adios

10-31-2003, 01:59 AM

Just an alternative approach: :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

table {
border-collapse: collapse;
margin: 100px auto;
background: #f8f8ff;
}
th {
font: bold 11px tahoma;
border: 3px black double;
}
td {
width: 100px;
height: 20px;
font: 200 11px tahoma;
text-align: center;
border: 1px black dashed;
cursor: crosshair;
}
.odd {
letter-spacing: 2px;
text-decoration: overline;
}
a:link {
color: darkgreen;
letter-spacing: 1px;
}
a:visited {
color: brown;
}
a:hover {
letter-spacing: 2px;
}
a:active {
color: orange;
}

</style>
<script type="text/javascript" language="javascript">

// courtesy Mike Hall@www.brainjar.com //

if (document.ELEMENT_NODE == null)
{
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}

var whtSpEnds = new RegExp('^\\s*|\\s*$', 'g');
var whtSpMult = new RegExp('\\s\\s+', 'g');

function normalizeString(s)
{
s = s.replace(whtSpMult, ' ');
s = s.replace(whtSpEnds, '');
return s;
}

function getTextValue(el)
{
var i, s = '';
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes[i].nodeType == document.TEXT_NODE)
s += el.childNodes[i].nodeValue;
else if (el.childNodes[i].nodeType == document.ELEMENT_NODE && el.childNodes[i].tagName == 'BR')
s += ' ';
else
s += getTextValue(el.childNodes[i]);

return normalizeString(s);
}

//------------------------------------//

function remove_textNodes(el)
{
var i;
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes[i].nodeType == document.TEXT_NODE)
el.removeChild(el.childNodes[i]);
else if (el.childNodes[i].nodeType == document.ELEMENT_NODE)
remove_textNodes(el.childNodes[i]);
}

function setTD_onclick()
{
var thisTable = document.getElementsByTagName('table').item(0);
var tBodies = thisTable.tBodies;
var thisTbody, tb = 0, thisRow, r, thisCell, c;
for (tb; tb < tBodies.length; ++tb)
{
thisTbody = tBodies.item(tb);
for (r = 0; r < thisTbody.rows.length; ++r)
{
thisRow = thisTbody.rows.item(r);
for (c = 0; c < thisRow.cells.length; ++c)
{
thisCell = thisRow.cells.item(c);
thisCell.onclick = function()

////// handler ------------------------------------------------------------------>

{
this.style.background = '#f0f0ff';
var el = this, text = prompt('Enter cell text:', getTextValue(this));
if (text != null)
{
textNode = document.createTextNode(text);
remove_textNodes(this);
while (el.hasChildNodes())
el = el.firstChild;
el.appendChild(textNode);
}
this.style.background = '#f8f8ff';
return false;
}

//////--------------------------------------------------------------------------->

}
}
}
}

onload = setTD_onclick;

</script>
</head>
<body style="background:#dcdcdc;">
<table>
<thead>
<tr>
<th>data</th>
<th>data</th>
<th>data</th>
<th>data</th>
</tr>
</thead>
<tbody>
<tr>
<td>alpha</td>
<td><span class="odd"><i>beta</i></span></td>
<td>gamma</td>
<td>delta</td>
</tr>
<tr>
<td>epsilon</td>
<td><strong>zeta</strong></td>
<td>eta</td>
<td>theta</td>
</tr>
<tr>
<td><a href="#null">iota</a></td>
<td>kappa</td>
<td>lambda</td>
<td><span style="font:10px;color:purple;text-transform:uppercase;">mu</span></td>
</tr>
<tbody>
</table>
</body>
</html>

nicklim

10-31-2003, 02:21 AM

just a note.... document.all is only for MS IE, if you want it to be crossbrowser (Mozilla) you may need to use document.getElementbyID["id"]

Bernie

10-31-2003, 02:57 AM

Dear All,

Thanks for your assistance. The heads-up on the browser dependence of "all" will save me a headache. The suggestion from Adios is giving me a headache, just knowing how far I must go to be HTML and JavaScript proficient.

Thanks again.

Willy Duitt

10-31-2003, 03:24 AM

The example I posted should be cross-browser.
It validates if getElementById else document.all

Post back if you have any questions.

.....Willy