Изменить содержимое ячейки таблицы, используя jQuery / Javascript - PullRequest
Новая
       9

Изменить содержимое ячейки таблицы, используя jQuery / Javascript

0 голосов
/ 30 августа 2011

Я пытаюсь написать функцию, которая позволит мне изменять содержимое ячейки таблицы.Моя таблица выглядит так: 

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

Это таблица, которая содержит информацию о запасах и тому подобное.Дело в том, что цены меняются довольно быстро, поэтому мне нужен способ изменить содержимое ячеек в таблице.Чтобы добраться до каждой ячейки, у меня есть следующая функция Javascript: 

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**
                      }
                 }
}

Я не уверен, как получить доступ к каждому элементу в каждой ячейке.Я понимаю, что в таблице нет ничего хорошего, поэтому, если у кого-нибудь есть какие-либо советы по изменению дизайна, я с удовольствием выслушаю.Если у кого-нибудь есть какие-либо советы или указания, они будут очень благодарны.

Ответы [ 2 ]

2 голосов
/ 30 августа 2011

Во-первых, вам нужно изменить атрибуты div. идентификаторы могут существовать только один раз на страницу ; классы могут использоваться несколько раз.

Так как вы все равно меняете разметку, вы можете добавить уникальный идентификатор к каждому div, например: 

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

Теперь вы можете ссылаться на каждый div отдельно, не прибегая к циклу: 

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

Если вам все еще нужно касаться каждого элемента div, вы можете использовать цикл jQuery: 

$( ".positive div" ).each( function() {
    $( this ).css( 'color', 'red' ); // Insert an appropriate statement here.
});
1 голос
/ 30 августа 2011

Используйте класс вместо идентификаторов, как уже упоминалось.Также ваша структура таблицы немного странная, но так как у вас уже есть это, я не буду ее менять.Таким образом, с классами вместо идентификаторов у вас теперь будет этот код 

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

И для итерации по данным таблицы просто выполните следующее.

$('#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" ); 

});
...