Entry
How do you change the content of a TABLE cell (TD element)?
How do you change the content of a TABLE cell (TD element)?
Mar 11th, 2000 06:51
Martin Honnen,
With IE4+ and NN6 due to full DOM access every page element including
table cells (TD) elements are scriptable. Just ID your cell e.g.
<TD ID="aCell">
and then get a reference to the cell
var cell =
document.all ? document.all['aCell'] // IE4+
: document.getElementById ? document.getElementById('aCell') // NN6
: null; // no DOM access for other browsers
which you can then script with.
Content change in IE4+ works with setting the
innerHTML
property so
cell.innerHTML =
'<A HREF="JavaScript.FAQts.com">JavaScript Knowledge Base</A>';
changes the content.
Content change with NN6 works with DOM methods (see
http://www.faqts.com/knowledge-base/view.phtml/aid/891/fid/128/lang/
) or with using the range object to parse HTML into a document fragment:
var range = document.createRange();
while (cell.hasChildNodes()) // remove old content
cell.removeChild(cell.lastChild);
range.setStartAfter(cell);
var docFrag = range.createContextualFragment(html);
cell.appendChild(docFrag);
and insert it into the cell.
Also see
http://www.faqts.com/knowledge-base/view.phtml/aid/970/fid/128/lang/
how to emulate innerHTML setting with NN6.
NN4 doesn't allow scripting tables/table rows/table cells through its
limited DOM. You can however script table cells in restricted
circumstances (see
http://www.faqts.com/knowledge-base/view.phtml/aid/979/fid/128/lang/
) by positioning the cell relative and then moving an absolutely
positioned layer on top of the cell whose content you manipulate.
The following page provides the code to faciliate that and an example.
Note that the code works with IE4+ and NN6 too by defaulting to the
above explained methods for those browsers. The main shortcomings for
NN4 are the lack of reflow of the table which means new cell content
has to fit in the old cell dimensions or is clipped to fit. You would
need to rewrite the complete table if you wanted to insert new content
wider or higher than the existing cell.
<HTML>
<HEAD>
<STYLE>
.orange { color: white; background-color: orange; }
</STYLE>
<SCRIPT>
if (document.layers)
document.write('<STYLE>TD.cell { position: relative; } <\/STYLE>');
</SCRIPT>
<SCRIPT>
function initTableLayers (tableName, rows, cols) {
if (document.layers) {
var maxHeight = new Array (rows);
var maxWidth = new Array (cols);
for (var r = 0; r < rows; r++)
maxHeight[r] = 0;
for (var c = 0; c < cols; c++)
maxWidth[c] = 0;
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
if (maxHeight[r] < cell.clip.height)
maxHeight[r] = cell.clip.height;
}
for (var c = 0; c < cols; c++)
for (var r = 0; r < rows; r++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
if (maxWidth[c] < cell.clip.width)
maxWidth[c] = cell.clip.width;
}
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
cell.clip.width = maxWidth[c];
cell.clip.height = maxHeight[r];
cell.rowIndex = r; cell.colIndex = c;
var ol = cell.ol = new Layer(maxWidth[c]);
ol.cell = cell;
ol.clip.height = maxHeight[r];
ol.left = cell.pageX;
ol.top = cell.pageY;
ol.visibility = 'show';
}
}
}
function rewriteCell (tableName, rowNo, colNo, html) {
if (document.layers) {
var cell = document[tableName + 'Cell' + rowNo + '_' + colNo];
cell.ol.document.open();
cell.ol.document.write(html);
cell.ol.document.close();
cell.ol.visibility = 'show';
cell.visibility = 'hide';
}
else if (document.all)
document.all[tableName + 'Cell' + rowNo + '_' + colNo].innerHTML =
html;
else if (document.createRange) {
var cell = document.getElementById(tableName + 'Cell' + rowNo + '_'
+ colNo);
while (cell.hasChildNodes())
cell.removeChild(cell.lastChild);
var range = document.createRange();
range.setStartAfter(cell);
var docFrag = range.createContextualFragment(html);
cell.appendChild(docFrag);
}
}
</SCRIPT>
<SCRIPT>
function init () {
initTableLayers ('table1', 3, 3);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<A HREF="javascript: rewriteCell('table1', 0, 0, 'Xibology'); void 0">
set 0, 0 to Xibology
</A>
|
<A HREF="javascript: rewriteCell('table1', 1, 0, 'Scriptology'); void
0">
set 1, 0 to Scriptology
</A>
|
<A HREF="javascript: rewriteCell('table1', 2, 2,
'Visit<BR><A CLASS=\'orange\' HREF=\'JavaScript.FAQts.com\'>'
+ 'JavaScript.FAQts.com<\/A>');
void 0">
set 2, 2
</A>
<TABLE BORDER="1">
<TR>
<TD ID="table1Cell0_0" CLASS="cell">
Kibology
</TD>
<TD ID="table1Cell0_1" CLASS="cell">
for
</TD>
<TD ID="table1Cell0_2" CLASS="cell">
all
</TD>
</TR>
<TR>
<TD ID="table1Cell1_0" CLASS="cell">
All
</TD>
<TD ID="table1Cell1_1" CLASS="cell">
for
</TD>
<TD ID="table1Cell1_2" CLASS="cell">
Kibology
</TD>
</TR>
<TR>
<TD ID="table1Cell2_0" CLASS="cell" VALIGN="top">
Scriptology
</TD>
<TD ID="table1Cell2_1" CLASS="cell" VALIGN="top">
for
</TD>
<TD ID="table1Cell2_2" CLASS="cell">
all.
<BR>
All for Scriptology at www.faqts.com
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
