Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 760

Aug 27th, 2009

Generated Table Rows

Expand Post »

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

Similar Threads

Delete all rows from table in javascript in JavaScript / DHTML / AJAX
Can we Filter DataSet.Table rows collection in VB.NET
Hide Table rows in FormView InsertTemplate in ASP.NET
Return rows from one table that may or may not match rows from another table in MySQL
table rows and columns in PHP

AshtonHogan

Reputation Points: 7

Solved Threads: 1

Posting Whiz in Training

Offline

209 posts
since Jul 2009

Permalink

Aug 27th, 2009

Re: Generated Table Rows

Nevermind, I found the solution:

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.

AshtonHogan

Reputation Points: 7

Solved Threads: 1

Posting Whiz in Training

Offline

209 posts
since Jul 2009

Permalink

Aug 27th, 2009

Re: Generated Table Rows

Hi,

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

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

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

Aug 27th, 2009

Re: Generated Table Rows

Such a long answer for something so small... did you even read my question?

AshtonHogan

Reputation Points: 7

Solved Threads: 1

Posting Whiz in Training

Offline

209 posts
since Jul 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: InnerHTML Table Coordinates

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Rookie having problem with 2 consecutive Ajax calls: 1st message lost

DaniWeb Message

Cancel Changes

User Name
Password