Цикл таблицы HTML с помощью jQuery

Question

У меня есть HTML-таблица, и я хочу в основном циклически проходить по каждой строке и каждой ячейке в строке и просто распечатывать результаты. Во-первых, у некоторых ячеек есть поля ввода, у некоторых есть выпадающие списки, а у некоторых есть сырое содержимое внутри TD.

Какой самый быстрый способ - просто перебрать каждую ячейку в html-таблице и получить результат каждой ячейки. для выпадающих списков я хотел бы зафиксировать значение выбора (не отображаемый текст).

Answer 1

Онлайн демо: http://jsbin.com/ewazu

Сначала я перебираю каждый TD и оцениваю, является ли first-child элементом input. Если это так, мы возвращаем его значение. Если это не так, мы спрашиваем, производит ли он текст. Если это производит текст, мы просим текст. Если текст не выводится, мы запрашиваем HTML-код для TD:

$("table td").each(function(i,o){
  var value = ( $(":first-child", this).is(":input") ) 
    ? $(":first-child", this).val() 
    : ( $(this).text() != "" ) 
      ? $(this).text() 
      : $(this).html() ;
  alert(value);
});

Answer 2

Трудно знать точно , что вы хотите, но если вы можете предположить, что у тд с полем выбора есть только то, что у тд с вводом есть только текстовое поле, вы можете сделать что-то вроде этого: http://jsbin.com/alara3/edit

Answer 3

Поскольку в каждой ячейке будет только один элемент, вы можете сделать что-то вроде:

$("#myTable tr").each(function() {
    // this represents the row
    $("td > *", this).each(function() {
        // nodeName attribute represents the tag - "INPUT" if element is <input>
        // use the type attribute to find out exactly what type 
        // of input element it is - text, password, button, submit, etc..
        if(this.nodeName == "INPUT") {
            console.log($(this).attr("type"));
        }
    });
});

#myTable > tr означает получить все <tr> элементы, которые являются потомками некоторых id="myTable".

Аналогично, td > * означает получение всех дочерних элементов элемента <td>, который сейчас представлен объектом this. Это все CSS-селекторы, и есть разные способы выбора элемента в DOM. См. jQuery docs , чтобы узнать больше о селекторах.

Документы jQuery core являются отличным справочным материалом, чтобы узнать обо всех доступных методах объекта jQuery.

Answer 4

Вы можете использовать следующий код.

$(':input', '#tableId').val('');