Wie man Tabellenzeilen durchläuft und die Zellenwerte mit jQuery erhält

Lesezeit: 5 Minuten

Benutzeravatar von Brittas
Brittas

Ich erstelle die folgende Tabelle dynamisch mit jQuery … Nach dem Ausführen meines Codes erhalte ich die folgende Tabelle:

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

Ich habe die Tabelle wie folgt iteriert:

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

            });

Durch die Verwendung der obigen Abfrage erhalte ich nur Werte der Zellen der ersten Zeile … helfen Sie mir mit jQuery, das die gesamten Zeilen der Tabelle durchläuft und die Werte der Zeilenzellen eingibt quantity1 und quantity2.

Benutzeravatar von thecodeparadox
das Codeparadox

$(this) statt $this

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

Beweis_1

Beweis_2

  • Ich habe es auch mit $ (this) versucht, aber ich bekomme nur die ersten tr-Zellendaten

    – Brittas

    4. Mai 2012 um 4:00 Uhr

  • @Brittas siehe die Geige console.loges gibt Ihnen allen Wert

    – das Codeparadoxon

    4. Mai 2012 um 4:09 Uhr

Benutzeravatar von smac2020
smac2020

Das Durchlaufen einer Tabelle für jede Zeile und das Lesen des Werts der ersten Spalte funktioniert mithilfe von JQuery- und DOM-Logik.

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

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

Benutzeravatar von Brittas
Brittas

Hallo zusammen, danke für die Hilfe unten ist der Arbeitscode für meine Frage

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

Sie haben Ihre Antwort, aber warum über den tr iterieren, wenn Sie direkt zu den Eingaben gehen können? Auf diese Weise können Sie sie einfacher in einem Array speichern und die Anzahl der CSS-Abfragen reduzieren. Hängt natürlich davon ab, was Sie tun möchten, aber für das Sammeln von Daten ist es ein flexiblerer Ansatz.

http://jsfiddle.net/zqpgq/

var array = [];

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

console.log(array);​

Benutzeravatar von Manohar Kokkula
Manohar Kokkula

Ich habe es bekommen und im Folgenden erklärt:

//Diese Tabelle mit zwei Zeilen, die jede Zeile enthalten, eine Auswahl in der ersten td und eine Eingabe-Tags in der zweiten td und eine zweite Eingabe in der dritten 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); 
  });
});

  • Entschuldigung, Mr. Quill, ich bin neu beim Stackoverflow und dies ist die erste Antwort, die von mir gepostet wurde.

    – Manohar Kokkula

    2. Juli 2015 um 11:38 Uhr

  • Unter deinem Beitrag befindet sich ein “Bearbeiten”-Link. Bearbeiten Sie Ihren Beitrag, um die Formatierung zu verbessern. Sie können sehen, wie die Antwort aussehen wird, während Sie sie bearbeiten.

    – Simon Forsberg

    2. Juli 2015 um 13:17 Uhr

  • Entschuldigung, Mr. Quill, ich bin neu beim Stackoverflow und dies ist die erste Antwort, die von mir gepostet wurde.

    – Manohar Kokkula

    2. Juli 2015 um 11:38 Uhr

  • Unter deinem Beitrag befindet sich ein “Bearbeiten”-Link. Bearbeiten Sie Ihren Beitrag, um die Formatierung zu verbessern. Sie können sehen, wie die Antwort aussehen wird, während Sie sie bearbeiten.

    – Simon Forsberg

    2. Juli 2015 um 13:17 Uhr

1431300cookie-checkWie man Tabellenzeilen durchläuft und die Zellenwerte mit jQuery erhält

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy