每列讀取值表

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（假設所有輸入類型均爲文本字段）。

至於代碼，它嚴重依賴於輸入的位置值，這不是一件好事，因爲佈局可以很容易地改變。相反，您可能想要將輸入類型與名稱或id屬性或自定義數據屬性（前綴爲「data-」，這是一個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(); 
}); 

這樣，您就可以添加/刪除屬性，而不必更改代碼，因爲它從元素的屬性讀取。