Доступ к тексту ячейки в Javascript

Question

Я пытаюсь изменить текст ячейки таблицы, когда только элемент <table> имеет идентификатор, в ячейках нет идентификаторов, например,

<table id="test">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

Так как мне изменить текст второй ячейки (ячейки 2) в Javascript без явного указания идентификатора для него?

Спасибо

AJ

Answer 1

Это действительно легко сделать с помощью jQuery, но я предполагаю, что вы хотите использовать нативные методы DOM. В этом случае

document.getElementById('test').getElementsByTagName('td')[1]

приведет вас ко второй ячейке таблицы в этой таблице.

https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

Answer 2

Вы можете сделать это с чистым JS с этим кодом:

document.querySelector('#test td:nth-child(2)').innerHTML = 'value changed';

Поддержка браузера для этого довольно бог: http://caniuse.com/#search=querySelector

Редактировать

К сожалению @ Код Мэтта Болла быстрее, как вы можете видеть здесь: JSPerf .

Answer 3

Самый очевидный способ для меня это сделать так, как показано ниже:

document.getElementById("test").rows[0].cells[1].innerHTML = "Cell not so 2."

http://www.w3schools.com/jsref/coll_table_cells.asp

Если вы имеете дело с большим количеством данных, не используйте JQuery, так как он работает медленно.

Вы можете посмотреть на сострадание между обработкой JQuery и собственным DOM здесь (если вы перейдете по ссылке в этом посте, на странице появится график, показывающий, насколько велика разница).

Answer 4

Что-то подобное должно работать:

document.getElementById('test').childNodes[1].childNodes[1].childNodes[3].innerHTML='changed cell';

Answer 5

Используя jQuery , эта задача будет проста:

$('#test td:first').text('Your new text goes here');

Я настоятельно рекомендую jQuery.Вы, вероятно, получите дополнительные ответы, рекомендующие также jQuery.