Làm thế nào để lặp qua một hàng bảng và nhận được các giá trị di động sử dụng jQuery

Question

tôi đang tạo ra bảng dưới đây động sử dụng jQuery ... Sau khi thực hiện mã của tôi tôi nhận được bảng như sau:

<table id="TableView" width="800" style="margin-left: 60px"> 
<tbody> 
<tr> 
<th>Module</th> 
<th>Message</th> 
</tr> 
<tr class="item"> 
<td> car</td> 
<td> 
    <input class="name" type="text"> 
</td> 
<td> 
<input class="id" type="hidden" value="5"> 
</td> 
    </tr> 
<tr class="item"> 
<td> bus</td> 
<td> 
    <input class="name" type="text"> 
</td> 
<td> 
<input class="id" type="hidden" value="9"> 
</td> 
    </tr> 

tôi sử dụng để lặp bảng như thế này:

$("tr.item").each(function() { 
      var quantity1 = $this.find("input.name").val(); 
     var quantity2 = $this.find("input.id").val(); 

      }); 

bằng cách sử dụng các truy vấn trên tôi nhận được giá trị của chỉ các tế bào dòng đầu tiên ... giúp tôi với jQuery sẽ lặp qua toàn bộ hàng của bảng và nhận được các giá trị di động hàng trong quantity1 và quantity2.

Answer 1

$(this) thay vì $ này

$("tr.item").each(function() { 
     var quantity1 = $(this).find("input.name").val(), 
      quantity2 = $(this).find("input.id").val(); 
}); 

Proof_1:

proof_2:

Answer 2

Bạn có câu trả lời của bạn, nhưng tại sao lặp qua các tr khi bạn có thể đi thẳng cho đầu vào? Bằng cách đó bạn có thể lưu trữ chúng dễ dàng hơn vào một mảng và nó làm giảm số lượng truy vấn CSS. Phụ thuộc vào những gì bạn muốn làm tất nhiên, nhưng để thu thập dữ liệu nó là một cách tiếp cận linh hoạt hơn.

http://jsfiddle.net/zqpgq/

var array = []; 

$("tr.item input").each(function() { 
    array.push({ 
     name: $(this).attr('class'), 
     value: $(this).val() 
    }); 
}); 

console.log(array);​ 

Answer 3

Xin chào mọi người cảm ơn vì sự giúp đỡ dưới đây là đoạn code làm việc cho câu hỏi của tôi

     $("#TableView tr.item").each(function() { 

      var quantity1=$(this).find("input.name").val(); 
      var quantity2=$(this).find("input.id").val(); 


      }); 

Answer 4

Looping thông qua một bảng cho mỗi hàng và đọc những tác phẩm giá trị cột 1 bằng cách sử dụng JQuery và logic DOM.

var i = 0; 
var t = document.getElementById('flex1'); 

$("#flex1 tr").each(function() { 
    var val1 = $(t.rows[i].cells[0]).text(); 
    alert(val1) ; 
    i++; 
}); 

Answer 5

I got it and explained in below:      
//This table with two rows containing each row, one select in first td, and one input tags in second td and second input in third td; 
<table id="tableID" class="table table-condensed"> 
              <thead> 
               <tr> 
                <th><label>From Group</lable></th> 
                <th><label>To Group</lable></th> 
                <th><label>Level</lable></th> 



               </tr> 
              </thead> 
              <tbody> 
       <tr id="rowCount"><td><select ><option value="">select</option><option value="G1">G1</option><option value="G2">G2</option><option value="G3">G3</option><option value="G4">G4</option></select></td><td><input type="text" id="" value="" readonly="readonly" /></td><td><input type="text" value="" readonly="readonly" /></td></tr> 
      <tr id="rowCount"><td><select ><option value="">select</option><option value="G1">G1</option><option value="G2">G2</option><option value="G3">G3</option><option value="G4">G4</option></select></td><td><input type="text" id="" value="" readonly="readonly" /></td><td><input type="text" value="" readonly="readonly" /></td></tr> 
       </tbody> 


              </table> 

     <button type="button" 
             class="btn btn-default generate-btn search-btn white-font border-6 no-border" 
             id="saveDtls">Save</button> 


        //call on click of Save button; 
        $('#saveDtls').click(function(event) { 

        var TableData = []; //initialize array; 

         var data=""; //empty var; 
          //Here traverse and read input/select values present in each td of each tr, ; 
         $("table#tableID > tbody > tr").each(function(row, tr) { 

         TableData[row]={ 
         "fromGroup": $('td:eq(0) select',this).val(), 
         "toGroup": $('td:eq(1) input',this).val(), 
         "level": $('td:eq(2) input',this).val() 


         }; 

         //Convert tableData array to JsonData 
         data=JSON.stringify(TableData) 
         //alert('data'+data); 


         }); 

    });