AJAX

Generated Table Rows

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2009

Posts: 81

Reputation: AshtonHogan is an unknown quantity at this point

Solved Threads: 1

AshtonHogan AshtonHogan is offline

Offline

Junior Poster in Training

Generated Table Rows

Aug 27th, 2009

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

•

Join Date: Jul 2009

Posts: 81

Reputation: AshtonHogan is an unknown quantity at this point

Solved Threads: 1

AshtonHogan AshtonHogan is offline

Offline

Junior Poster in Training

Re: Generated Table Rows

Aug 27th, 2009

Nevermind, I found the solution:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Generated Table Rows

Aug 27th, 2009

Hi,

here' a simple document that uses HTML DOM manipulation procedure:

Help with Code Tags

(Toggle Plain Text)

<!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>

<!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...

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...