Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Retrieve Table Column.

Status
Not open for further replies.
jagi

jagi

Programmer
Mar 13, 2005
48
US
Can anyone tell me how to retrieve all the cells of a column in a table without having to traverse all the rows and all the cells.
Right now I am naming all the cells under that column name='x', and then later doing document.getElementsByName('x') which i thought would work - but not wotking.
Can i do it using <col> tag ?

any ideas which would help me access the elements in the fastest way???

thank you.
 
Sort by date Sort by votes
it sounds like, ultimately, want is to get the value of certain cells in a table...if that the case, the you would have to label each cell with <span> tags and then use the DOM to find the inner html for that specific cell...

labeling each cell will allow you pick and choose which cell values you want to retrieve.

this is a simple example:

Code: 
<script>
function showContents() {
contentX=document.getElementById('testCell').innerHTML;
alert(contentX);
}
</script>

<html>
<body>
<table>
<tr>
<td><span id=testCell>Hello World!</span></td>
</tr>
<tr>
<td><input type=button value='display cell contents' onclick=showContents();>
</td>
</tr>
</table>
</body>
</html>

hope that helps.

- g
 
Upvote 0 Downvote
no, it sounds like he/she is on the right track, i have a feeling he/she is just not looping through the collection he/she retrieves using the getElementsByName() function properly.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
as a correction to my original post, you can just name the cells as you have, without having to use the <span> tags...i was thinking too much. then you would use the innerHTML to retrieve the actual contents of the cell...

- g
 
Upvote 0 Downvote
also, unless i'm mistaken, you can't have multiple tags with the same name and expect to access them in an array fashion...

or can you(?)...what i'm thinking is the setup you have with radio buttons, where they all belong to the same id and you access them through an array. i don't think that's possible, tho...

anyway, you could avoid using the innerHTML if you include a value='' in the td tag and have an either dynamic/static value for it.

- g
 
Upvote 0 Downvote
Thanks guys, but let me explain my question again.
my code:

Code: 
<table>
<!-- This commented part is only a trial.  
<colgroup>
      <col id='col1'>
      <col id='col2'>
      <col id='col3'>
      <col id='col4'>
</colgroup>
-->
  <tr>
      <td name='col1'>row1col1</td>
      <td name='col2'>row1col2</td>
      <td name='col3'>row1col3</td>
      <td name='col4'>row1col4</td>
  </tr>
  <tr>
      <td name='col1'>row2col1</td>
      <td name='col2'>row2col2</td>
      <td name='col3'>row2col3</td>
      <td name='col4'>row2col4</td>
  </tr>
</table>

In the above code i am showing the colgroup(commented part) only to hint you my next question - 'Can i do this is using col tag ?'

I actually have a huge table. I want to be able to access 'col1'. I am trying with this:

Code: 
function accessColElements() {
  var my_col = document.getElementsByName("col1");
}

I thought getElementsByName() would return all the cells. But actually seems like the method only works for form elements.

I need to know a fast way to access the column elements without having to traverse all the rows and cells.

Any ideas plz ???
thank you.
 
Upvote 0 Downvote

hmm...first, a td tag can have a value set within it and you have the ability to retrieve that value dynamically...

anyway, it looks like the col tag can only be used for setting attributes of that group, not for actual data retrieval...i may be wrong.

if you end up not being able to figure this out, a way out would be to keep the same naming convention you have but add a 'a' or 'b', etc., for similar columns...

ie:
Code: 
  <tr>
      <td name='col1'>row1col1</td>
      <td name='col2'>row1col2</td>
      <td name='col3'>row1col3</td>
      <td name='col4'>row1col4</td>
  </tr>
  <tr>
      <td name='col1a'>row2col1</td>
      <td name='col2a'>row2col2</td>
      <td name='col3a'>row2col3</td>
      <td name='col4a'>row2col4</td>
  </tr>

then when you need to reference an individual cell, you can, and if you need to get all the cells from a specific column, let's say column 1, you can include in your script a regex to find all id's that match 'col1' in the id and build your array with each individual cell id...

just a thought.

- g
 
Upvote 0 Downvote
thanx spewn.

I thought of the same - but getElementsById() is not there, only thing is getElementById() and it returns one object only.

Can u give me a hint how exactly i can use regular expressions.

thanx a bunch again, all of you for replying.
 
Upvote 0 Downvote
A question: are you generating the table with a server-side program? If so, you can also have the server-side program generate a javascript variable containing the highest cell number used and that will help in looping thru the cells. Assuming you are (via the server-side language) naming your cells something like "colAx, pass the highest value used to javascript like this (forgive the ASP code in the JS forum):
Code: 
'this could be between the </body> and the </html> tags
<%
<script language="JavaScript">
var maxCells = <%=maxCells%>;
</script>
%>
Then, in your code, you can do something like this:
Code: 
for ( var x = 1; x <= maxCells; x++ ) {
   var CellVal = document.getElementById("colA"+x).innerText;
} // end for


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
273
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
283
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
250
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Limit rows based on column value
Replies
0
Views
81
TheLazyPig
TheLazyPig
TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
75
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top