Как получить доступ к дочерним строкам элемента thead?

Question

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

Что я хотел бы сделать дальше, это включить переключение отдельных строк данных на графике. Вместо того, чтобы делать Ajax-вызов, чтобы вернуться на сервер и снова получить и проанализировать данные, я бы хотел просто прочитать данные обратно из таблицы необработанных чисел и перерисовать график - все на стороне клиента. Моя проблема заключается в попытке получить значения имен столбцов из элементов <thead> и <tbody>. Я могу получить это:

tbody = $("#raw_body");

console.log(tbody);

И посмотрите в консоли Firebug:

[tbody#raw_body]

В консоли я могу щелкнуть по объекту и увидеть, что у экземпляра [0] есть «children» и т. Д. Однако каждый раз, когда я пытаюсь что-то вроде этого:

console.log(tbody[0].children[0]);

Я получаю:

undefined

Так как мне обратиться к строкам таблицы для назначения объектам Javascript, как это?

r = tbody[0].children[0];

Answer 1

$("#raw_body tbody tr") даст вам все строки в таблице с идентификатором raw_body.

Я не уверен, что вы подразумеваете под: «Так как мне обратиться к строкам таблицы для назначения объектам Javascript, как это?»

Answer 2

$("#raw_body")[0]

Возвращает базовый объект DOM, а не оболочку jQuery. У объектов DOM нет метода children (*). Если вам нужна версия в jQuery, используйте eq() вместо:

var first_row= $('#raw_body').eq(0).children().eq(0);

Однако вы можете опустить .eq(0) на $('#raw_body'), потому что когда-либо будет только один элемент, соответствующий #raw_body. Оболочки jQuery обрабатывают элемент и список элементов одинаково, поэтому вам не нужно извлекать отдельный элемент, чтобы иметь возможность вызывать children() для него.

*: хотя у них есть свойство childNodes. Вы, вероятно, не хотите использовать это, потому что тогда вам нужно беспокоиться об узлах Text для пробелов между элементами. Однако таблицы, в частности, имеют свойства rows и cells, которые проще в использовании, поэтому вы можете сделать это с помощью:

var first_row= $('#raw_body')[0].rows[0];

Answer 3

table объекты имеют свойство с именем rows.Вы можете использовать это вместо того, чтобы перебирать строки.

http://www.javascriptkit.com/domref/tableproperties.shtml

var tableObj = $("#myTable").get();
for(var i in tableObj.rows) {
    // Do something
    alert( tableObj.rows[i].innerHTML );
}

Если вы хотите использовать jQuery:

var $rows = $("#raw_body tr");
$rows.each(function() {
    // Do something
    alert( $(this).html() );
});

Answer 4

Это на самом деле .childNodes[0]. .children () - это метод jquery, который сканирует дочерние узлы на наличие указанного шаблона, поэтому используйте

tbody[0].childNodes[0]

вместо.