열당 테이블 값 읽기

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과 같은 간단한 선택기가 작동합니다 (모든 입력 유형이 텍스트 필드라고 가정).

코드의 경우 레이아웃의 변경이 쉽기 때문에 입력 코드의 위치 값에 크게 의존하며 이는 좋지 않습니다. 오히려 name 또는 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(); 
}); 

이 방법, 당신은/추가 속성을 제거 할 수 있습니다 및 아닌 코드에서 요소의 특성을 읽습니다.