Чтение значений таблицы за столбец

Question

У меня есть две колонки в моей таблице, и строки создаются динамически.

<table id ="datatable"> 
    <tr> 
    <td> 
     <input type ="text"> 
    </td> 
    <td> 
     <input type ="text"> 
    </td> 
    </tr> 
</table> 

Для каждой строки я хочу получить значение каждой таблицы и вставить их в объект следующим образом.

var reading= new Object(); 
reading.Name = (column1).value 
reading.Value = (column2).value 

Как я могу это сделать?

Answer 1

//fetching lines 
$('table tr').each(function(){ 
    var reading = new Object(); 

    reading.name = $(this).find('td:first input').val(); 
    reading.value= $(this).find('td:last input').val(); 

}); 

Обновлено: набор сообщение об ошибке, если пусто

$('table tr').each(function(){ 
    var reading = new Object(); 

    name = $(this).find('td:first'); 
    reading.name = name.find('>input').val(); 
    if(reading.name == '') 
    { 
    name.append('<span>field empty</span>'); 
    } 

    value = $(this).find('td:last'); 
    reading.value = value.find('>input').val(); 
    if(reading.value == '') 
    { 
    value.append('<span>field empty</span>'); 
    } 

}); 

Answer 2

Вы можете использовать селектор, который получает все типы входных данных, которые находятся в ячейках таблицы, а затем перебирать через каждый из них с помощью each function :

// Get the selector. 
var selector = $("#datatable tr td input[type='text']"); 

// Create the object. 
var reading = {}; 

// Cycle through the inputs, attaching the properties. 
selector.each(function (index, element) { 
    // If index is 0, then set the name property. 
    if (index === 0) reading.Name = $(this).val(); 

    // If index is 1, set the value property. 
    if (index === 1) reading.Value = $(this).val(); 
}); 

Примечание. Селектор не должен быть таким точным. В этом случае также будет работать простой селектор, такой как #datatabe input (при условии, что все ваши типы ввода являются текстовыми полями).

Что касается кода, он в значительной степени зависит от позиционного значения входов, и это нехорошо, так как макет можно легко изменить. Скорее, вам может потребоваться присвоить ваши типы ввода атрибутом имени или идентификатора или атрибутом пользовательских данных (с префиксом «данные»), это дополнение HTML 5, но оно действительное для 4.01 strict), например:

<table id ="datatable">    
    <tr>    
    <td>    
     <input name="Name" type ="text">    
    </td>    
    <td>    
     <input name="Value" type ="text">    
    </td>    
    </tr>    
</table> 

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

// Get the selector. 
var selector = $("#datatable tr td input[type='text']"); 

// Create the object. 
var reading = {}; 

// Cycle through the inputs, attaching the properties. 
selector.each(function (index, element) { 
    // Get the selector for the element. 
    var thisSelector = $(this); 

    // Set the value accoding to the name on the element. 
    reading[thisSelector.attr("name")] = thisSelector.val(); 
}); 

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