Jak iterację wierszy tabeli i uzyskać wartości komórek przy użyciu jQuery

Question

tworzę tabelę poniżej dynamicznie przy użyciu jQuery ... Po wykonaniu mojego kodu pojawia się tabela poniżej:

<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> 

Kiedyś iteracyjne tabelę tak:

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

      }); 

Wykorzystując powyższe zapytanie otrzymuję wartości zaledwie pierwszych rzędów komórek ... pomóż mi z jQuery, która będzie iterację całych wierszy tabeli i uzyskać wartości komórek wierszy w quantity1 i quantity2.

Answer 1

$(this) zamiast $ to

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

Proof_1:

proof_2:

Answer 2

Masz swoją odpowiedź, ale dlaczego iteracyjne nad tr kiedy można przejść bezpośrednio do wejść? W ten sposób możesz je łatwiej przechowywać w tablicy i zmniejszyć liczbę zapytań CSS. Zależy oczywiście od tego, co chcesz zrobić, ale w przypadku zbierania danych jest to bardziej elastyczne podejście.

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

Witam każdy dzięki za poniższej pomoc jest kod roboczych na moje pytanie

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

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


      }); 

Answer 4

przelotowego tabeli dla każdego wiersza i czytanie 1st prace wartość kolumny za pomocą JQuery i logika 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); 


         }); 

    });