Wie man durch td in einem tBody iteriert?

<table> 
    <tbody id="SAMPLETBODY"> 
     <tr> 
      <td>TEST1</td> 
      <td>TEST2</td> 
      <td>TEST3</td> 
      <td>TEST4</td> 
     </tr> 
    </tbody> 
</table>

Ich habe den Code oben, ich durch die TDs laufen wollen, da in einer Tabelle durch tbodies Iterieren das ist wie:Wie man durch td in einem tBody iteriert?

var table1 = document.getElementById('firstTable'); 
for(int i = 0; i < table1.tBodies.length; i++) { 
    /*DO SOMETHING HERE*/ 
}

Wie kann ich es in td tun innen tbodies?

EDIT:

ich mehrere tbodies in der Tabelle haben, ich habe bereits versucht, einige Codes, die ähnlich ist (es durch alle tbodies iteriert) und hier gepostet, bevor ich die Frage gestellt.

Erneut bearbeiten:

endgültige Code:

function sampleFunc() { 
    var x = ""; 
    var tds = document.querySelectorAll('#SAMPLETBODY td'), i; 
    for(i = 0; i < tds.length; ++i) { 
     x = x + tds[i].innerHTML; 
    } 
    return x; 
}

dank: rink.attendant.6

Quelle

2014-03-06 NOOB_USER

Warum nicht JQuery verwenden? –

warum jquery für etwas so einfaches verwenden? – sevenseacat

@sevenseacat 1. Wahrscheinlich woanders auf der Seite verwenden 2.Kann es in einer Zeile des Codes schreiben –

Verwendung querySelectorAll():

var tds = document.querySelectorAll('tbody td'), i; 
for(i = 0; i < tds.length; ++i) { 
    // do something here 
}

Wenn Sie es beschränken wollen eine bestimmte Tabelle, zum Beispiel #firstTable, müssen Sie angeben, dass:

var tds = document.querySelectorAll('#firstTable tbody td');

habe gerade bemerkt, dass Sie eine ID auf Ihrem tbody haben, so dass die Wähler, wie dies für Ihre spezifischen tbody aussehen:

var tds = document.querySelectorAll('#SAMPLETBODY td');

Quelle

2014-03-06 06:07:09

Er verwendet nicht jquery –

Dies ist nicht jQuery. – Barmar

'querySelectorAll()' ist eine JavaScript-Funktion, die mit IE 8+ und anderen Browsern funktioniert –

Sie können die bescheidenen getElementsByTagName() verwenden:

var tbody = document.getElementById('SAMPLETBODY'), 
cells = tbody.getElementsByTagName('td'); 

for (var k = 0; k < cells.length; ++k) { 
    // do stuff with cells[k]; 
}

Quelle

2014-03-06 06:08:14

Dies wird alle TDs finden, nicht nur in tbody – SajithNair

@SajithNair Wo sonst als im Inneren tbody würden Sie td finden? –

Es kann tHead haben .. richtig? – SajithNair

var table1 = document.getElementById('firstTable');

Hier gibt es eine Tabelle mit der ID firstTable

Dann, dass alle td im tabelle1 erhalten mit wie

var tds = table1.getElementsByTagName('td');

Jetzt können Sie wie

for (i = 0; i < tds.length; i++) { 
    console.log(tds[i]) 
}

JSFiddle

Quelle

2014-03-06 06:08:52 Praveen

Was ist, wenn ein Tfoot in der Tabelle ist? –

Versuchen Sie, diese über jede td iterieren ..

$("td", firstTable).each(function() {...}

Nur mit Javascript. Versuchen Sie, diese ... Edit:

  var table = document.getElementById('SAMPLETBODY'), 
      cells = table.getElementsByTagName('td'); 

      for (var k = 0; k < cells.length; ++k) { 
       // do stuff with cells[k]; 
       alert(cells[k].innerHTML); 
      }

Quelle

2014-03-06 06:09:28 Arjit

Er verwendet nicht jQuery. – Barmar

Was ist '$'? Es ist keine native JavaScript-Funktion. –

Ich habe meinen Code mit Javascript bearbeitet. – Arjit

Sie können dies zum Beispiel verwenden:

var tbody = document.getElementsByTagName("tbody")[0]; 
var tds = tbody.getElementsByTagName("td"); 

for(var node in tds){ 
    console.log(tds[node]) 
}

Es gibt verschiedene Methoden sind diese Dinge zu tun, können Sie document.getElementById (wenn Sie Tabelle haben oder tbody mit id), document.getElementsByClassName für den Fall, dass table oder tbody Klassennamen usw. haben

Demo

Quelle

2014-03-06 06:10:31

Was ist, wenn ein Tfoot in der Tabelle ist? –

eine ID für die Tabelle geben und Javascript verwenden für dieses

<table id="table_id" > 
<script> 
var e1 = document.getElementById('table_id'); 
for(int i = 0; i < e1.tBodies.length; i++) { 

} 
</script> 
</table>

Quelle

2014-03-06 06:11:33 Smoke

Ich bin mir nicht sicher, ob '

Iterate über rows ein cells Arrays:

var table1 = document.getElementById('firstTable'); 

for (var i = 0; i < table1.tBodies.length; i++) { 

    var rows = table1.tBodies[i].rows; 
    for (var j = 0; j < rows.length; j++) { 

     var cells = rows[j].cells; 
     for (var k = 0; k < cells.length; k++) { 
      console.log(cells[k]); 
     } 
    } 
}

http://jsfiddle.net/dfsq/6Xbre/

Quelle

2014-03-06 06:16:00 dfsq

Mit getElementsByTagName('td') oder querySelectorAll ist der vernünftigste Ansatz, aber da Sie bereits über tbodies wissen, könnte es interessant sein, für Sie rows und cells sowie zu lernen.

Ein tbody Element hat eine Eigenschaft rows, die eine Sammlung von tr Elementen ist, d. H. Die Zeilen, die es enthält (nicht überraschend, oder?). Jedes tr Element als Gegenleistung als eine Eigenschaft cells, die eine Sammlung von td Elementen ist (keine Überraschung auch hier).

So technisch könnten Sie tun

for(var i = 0; i < table1.tBodies.length; i++) { 
    var tbody = table1.tBodies[i]; 
    for (var j = 0; j < tbody.rows.length; j++) { 
    var row = tbody.rows[j]; 
    for (var k = 0; k < row.cells.length; k++) { 
     var cell = row.cells[k]; 
     // ... 
    } 
    } 
}

Aber eine solche verschachtelte for-Schleife schwer zu lesen und zu pflegen. Die anderen Antworten zeigen viel bessere Lösungen.

Sie können mehr über die Eigenschaften von tbody, tr und in der MDN-Dokumentation erfahren.

Quelle

2014-03-06 06:20:39

Ich habe versucht zu verwenden ': nicht' Selektor zusammen mit 'querySelectorAll' etwas wie' var table1 = document.getElementById ('firstTable'); var tds = table1.querySelectorAll ('td: nicht (tfoot td)'); 'aber ich konnte keinen Weg finden, es zu tun. Kannst du deine Gedanken zu diesem Ansatz teilen (möglich/nicht)? – Praveen

@Praveen: Anders als bei jQuery akzeptiert der CSS-': not'-Selektor nur [" einfache Selektoren "] (http://www.w3.org/TR/selectors/#simple-selectors), z.Typ, Klasse, ID, Attribut, keine Selektoren, die die Beziehung zwischen Knoten (Nachkommen, Kind, Geschwister) ausdrücken. Sie müssten stattdessen 'querySelectorAll ('tbody td')' 'verwenden. –

Verwandte Themen