3 Stimmen

Schleifen durch die html-Tabelle mit jQuery

Ich habe eine Html-Tabelle, und ich möchte im Grunde Schleife durch jede Zeile und jede Zelle pro Zeile und einfach ausdrucken die Ergebnisse. Die eine Sache ist, einige der Zellen haben Eingabefelder, einige haben Dropdowns auswählen und einige haben rohen Inhalt innerhalb der TD.

Was ist der schnellste Weg, um einfach looop durch jede Zelle in einer html-Tabelle und erhalten das Ergebnis jeder Zelle. für die Dropdowns auswählen würde ich den Wert der Auswahl (nicht der Anzeigetext) erfassen wollen.

6voto

Sampson Punkte 258265

Online-Demo: http://jsbin.com/ewazu

Ich fahre durch die einzelnen TD und die Bewertung, ob die first-child ist eine input Element. Wenn ja, geben wir seinen Wert zurück. Wenn nicht, fragen wir, ob es Text erzeugt. Wenn es Text produziert, fragen wir nach dem Text. Wenn es keinen Text erzeugt, fragen wir den HTML-Code für das TD :

$("table td").each(function(i,o){
  var value = ( $(":first-child", this).is(":input") ) 
    ? $(":first-child", this).val() 
    : ( $(this).text() != "" ) 
      ? $(this).text() 
      : $(this).html() ;
  alert(value);
});

2voto

Anurag Punkte 136648

Da es in jeder Zelle nur ein Element geben wird, könnten Sie etwa so vorgehen:

$("#myTable tr").each(function() {
    // this represents the row
    $("td > *", this).each(function() {
        // nodeName attribute represents the tag - "INPUT" if element is <input>
        // use the type attribute to find out exactly what type 
        // of input element it is - text, password, button, submit, etc..
        if(this.nodeName == "INPUT") {
            console.log($(this).attr("type"));
        }
    });
});

#myTable > tr bedeutet, dass Sie alle <tr> Elemente, die Kinder von einigen id="myTable" .

Gleichermaßen, td > * bedeutet, dass Sie alle Kinder der <td> Element, das durch das Element this Objekt gerade jetzt. Dies sind alles CSS-Selektoren, und es gibt verschiedene Möglichkeiten, ein Element im DOM auszuwählen. Siehe die jQuery-Dokumente um mehr über Selektoren zu erfahren.

En jQuery-Kern docs sind eine großartige Referenz, um sich über alle verfügbaren Methoden des jQuery-Objekts zu informieren.

2voto

David Hedlund Punkte 125085

Es ist schwer zu wissen genau was Sie wollen, aber wenn Sie davon ausgehen können, dass td's mit einem Auswahlfeld nur das haben, td's mit einer Eingabe nur ein Textfeld haben, könnten Sie so etwas tun: http://jsbin.com/alara3/edit

-2voto

usman mehmood Punkte 82

Können Sie folgenden Code verwenden.

$(':input', '#tableId').val('');

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X