Schleifen durch die html-Tabelle mit jQuery

Question

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.

Answer 1

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);
});

Answer 2

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.

Answer 3

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

Answer 4

Können Sie folgenden Code verwenden.

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