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

Question

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

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

Так как изменить текст второй ячейки (Cell 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

Использование jQuery, эта задача будет столь же простым, как следующие:

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

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

Answer 3

Нечто подобное должно работать:

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

Answer 4

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

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

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

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

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

Answer 5

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

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

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

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

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