Modify contents of table cell using jQuery/Javascript

Question

I'm trying to write a function that will allow me to change the contents of a table cell. My table looks like this:

<table id="stock_table" style="table-layout:fixed">
<tr>
      <td class = "positive">
      <div id="symbol">GOOG</div> 
      <div id="change">+12.22</div>
      <div id="lasttrade">539.08</div>
      </td>
      <td class = "positive">
      <div id="symbol">ANF</div> 
      <div id="change">+4.24</div>
      <div id="lasttrade">63.45</div>
      </td>

It's a table that contains stock information and the like. The thing is, prices change fairly rapidly, so I need a way to modify the contents of the cells in the table. To get to each cell, I have the following Javascript function:

function goThruCells() {
             var table = document.getElementById("stock_table");
                 for (var i = 0, row; row= table.rows[i]; i++) {
                      for (var j = 0, col; col = row.cells[j]; j++) {
                           **I don't know what to do here**
                      }
                 }
}

I'm not sure how to access each element in each cell. I realize that the table is nothing great, so if anyone has any re-design advice on that I'd gladly listen. If anyone has any advice or pointers, they would be greatly appreciated.

You have jQuery as a tag, but don't use it in your code. Is jQuery an option for you? — Blazemonger
– Blazemonger, Commented Aug 29, 2011 at 20:42
what are you trying to accomplish? simply edit the numbers and change td's class to positive/negative? numbers based on what, the symbol? also DON'T use the same id tag more than once on a page, it's invalid and bad practice, use class instead — mreq
– mreq, Commented Aug 29, 2011 at 20:43
You shouldn't have multiple IDs on the page, use classes instead. — gen_Eric
– gen_Eric, Commented Aug 29, 2011 at 20:45
jQuery definitely an option- it seems like it would be easiest to do a solution with it but I'm not sure how. I'm trying to edit the change and lasttrade text with json data that I get. I just don't know how to edit a specific area of text! — Joe Schwab
– Joe Schwab, Commented Aug 30, 2011 at 1:15

George Cummins · Accepted Answer · 2011-08-29 20:51:41Z

2

First, you will need to change the div attributes. IDs can exist only once per page; classes can be used multiple times.

Since you are changing your markup anyway, you can add a unique ID to each div, like this:

<td class = "positive">
<div id="GOOG_symbol" class="symbol">GOOG</div> 
<div id="GOOG_change" class="change">+12.22</div>
<div id="GOOG_lasttrade" class="lasttrade">539.08</div>
</td>

Now you can reference each div individually without resorting to a loop:

$( "#GOOG_lasttrade" ).doSomething();

If you still need to touch every div, you can use a jQuery loop:

$( ".positive div" ).each( function() {
    $( this ).css( 'color', 'red' ); // Insert an appropriate statement here.
});

edited Aug 29, 2011 at 20:51

answered Aug 29, 2011 at 20:45

George Cummins

29k8 gold badges74 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aziz punjani · Accepted Answer · 2011-08-29 20:52:05Z

1

Use class instead of ID's as already mentioned. Also your table structure is a bit odd but since you already have that to start with i will not change it. So with the classes instead of id's you would have this code now

<table id="stock_table" style="table-layout:fixed">
    <tr>
          <td class = "positive">
              <div class="symbol">GOOG</div> 
              <div class="change">+12.22</div>
              <div class="lasttrade">539.08</div>
          </td>
          <td class = "positive">
              <div class="symbol">ANF</div> 
              <div class="change">+4.24</div>
              <div class="lasttrade">63.45</div>
          </td>
    </tr>
</table>

And to iterate over the table data simply do the following.

$('#stock_table tr td').each(function(){
    var symbol = $(this).find('.symbol').html(); 
    var change = $(this).find('.change').html(); 
    var lasttrade = $(this).find('.lasttrade').html(); 
    console.log( symbol );
    console.log( change );
    console.log( lasttrade );

    // to change the value  
    symbol.html( "new value" ); 

});

answered Aug 29, 2011 at 20:52

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

1 Comment

Joe Schwab Over a year ago

I like the look of this solution. However, the loop doesn't function quite right- I'll play around with it and post if I come up with a solution!

Collectives™ on Stack Overflow

Modify contents of table cell using jQuery/Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related