Hi,
Is there a way to reference a table cell in a table that will have X amount of rows?
I want to use javascript preferably... The only methods I know of are "getElementById" and "getElementByName" - Problem is, since the cells are only known once the page is run, it is impossible to hardcode an Id OR a name before hand.
Any suggestions?
Thanks,
Ash
Nevermind, I found the solution:
<html>
<head><title></title></head>
<body>
<script type="text/javascript">
function getRow(t) {
var col=t.cellIndex;
var row=t.parentNode.rowIndex;
var testTable = document.getElementById("testTable");
alert(testTable.rows[row].cells[col].innerHTML);
}
</script>
<table id="testTable" border='1' style="background-color:black; color:white">
<tr>
<td width='150px' onclick="getRow(this)">
test 1
</td>
<td onclick="getRow(this)">
<b>Test B</b>
</td>
</tr>
<tr>
<td width='150px' onclick="getRow(this)">
test 2
</td>
<td onclick="getRow(this)">
<b>Test B</b>
</td>
</tr>
</table>
</body>
</html>My only question now is:
Is there a better way to retrieve cell data than innerHTML ? I tried "data" but it returns "[object]"... When I use innerHTML it returns the html tags, along with the text, and I only want the text...
Thanks.
Hi,
here' a simple document that uses HTML DOM manipulation procedure:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>http://www.daniweb.com</title>
<style type="text/css" media="screen">
<!--
table {
width : 100%;
color : #778899;
letter-spacing : 2px;
background-color : #C0C0C0;
border-spacing : 1px;
border-collapse : separate;
border : none;
text-align : center;
}
td {
background-color : #F0F0F0;
padding : .250em; }
-->
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="dynamic">
<script type="text/javascript">
<!--
( function() {
if (( "createElement" && "getElementById" ) in document ) {
var fragment = document.createDocumentFragment();
fragment.appendChild(( function() { // Normalized document status.
var table = document.createElement("table");
table.setAttribute( "id", "table1" );
var tBody = document.createElement("tbody");
table.appendChild( tBody );
var cellCount = 1;
for ( var x = 0; x < 5; x++ ) {
/*
********************************
~ Adding 5 rows into dynamic table.
*********************************/ var tRow = tBody.insertRow( -1 );
for ( var i = 0; i < 10; i++ ) {
/*
********************************
~ Creating 10 columns -
for each row.
*********************************/ var tCell = tRow.insertCell( -1 );
tCell.appendChild( document.createTextNode( "R" + ( x + 1 ) + "C" + cellCount ));
cellCount++;
}
} return table;
} )( ));
document.getElementById("dynamic").appendChild( fragment ); } // Use the document.write procedure if you want to provide support for older version of browsers. }
} )( /* www.daniweb.com */ )
function cell( r, c ) {
// This function allows you to grab target cell on a specified table-element
var dTable = document.getElementsByTagName("table")[ 0 ];
r = dTable.rows[ r ];
c = r.cells( c );
return (( c ) ? c : alert( "out of range: cell" + c + " is undefined." ));
};
alert( cell( 1, 3 ).firstChild.nodeValue ) // Test output: [ Row2-Cell4 ] / "R2C14"
// -->
</script>
</body>
</html>hope it's enough to get you started...
Such a long answer for something so small... did you even read my question?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.