Come scorrere un tavolo righe e ottenere i valori delle celle utilizzando jQuery

Question

sto creando la seguente tabella in modo dinamico utilizzando jQuery ... Dopo aver eseguito il mio codice ottengo la tabella come di seguito:

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

ho usato per iterare la tabella come questa:

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

      }); 

utilizzando la query sopra sto ottenendo valori di solo le cellule prima fila ... aiutarmi con jQuery che scorrere le intere righe della tabella e ottenere i valori delle celle delle righe in quantity1 e quantity2.

Answer 1

$(this) invece di $ questo

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

Proof_1:

proof_2:

Answer 2

avete ottenuto la vostra risposta, ma perché iterare il tr quando si può andare dritto per gli ingressi? In questo modo è possibile archiviarli più facilmente in un array e ridurre il numero di query CSS. Dipende da cosa vuoi fare, naturalmente, ma per raccogliere i dati è un approccio più flessibile.

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

Ciao a tutti grazie per l'aiuto sotto è il codice di lavoro per la mia domanda

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

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


      }); 

Answer 4

Looping attraverso una tabella per ogni riga e leggere il 1 ° opere di valore colonna utilizzando JQuery e logica 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); 


         }); 

    });