Get Körper Tisch Zeilen, aber nicht Tisch Kopf

Question

Ich habe eine Tabelle, die korrekte thead und tbody.Ich packe alle Tabellenzeilen in einer Tabelle, um sie zu verarbeiten, aber leider ist es auch die Kopfzeile ergreift. Hier ist mein Code:

var base=$(this),$rowCells; 
base.find('tr').each(function(){  
//get body text 
$rowCells=$(this).children(); 
var $bodyText=$rowCells.map(function() { 
    return $(this).text(); 
}).get(); 
}) 

Ok hier ist das, was ich versucht habe,

base.find('tbody tr').each(function()) 

aber das geht ein wenig verrückt geht in eine ewige Schleife und stirbt in einem großen Weg. versuchte auch

base.find('tbody > tr').each(function()) 

aber auch dies nicht funktioniert und im Grunde meinen Browser stürzt ab, wie zuvor. Dieser Code ist nicht der einzige Code btw, aber der wichtige Looping-Teil. Dies ist nur ein kleiner Teil eines Jquery-Plugins, das ich gerade schreibe.

Ich will nur wissen, wie ich den tbody anstelle der thead anvisieren kann.

Ich wurde aufgefordert, mehr Code zu posten. Das ist mein vollständiges jquery-Plugin. Er erstellt eine neue Spalte, nimmt alle Zeilen und fügt sie in die erste Spalte ein und blendet alle anderen Zeilen aus, so dass sie auf einem Mobiltelefon angezeigt werden können. Das Plugin funktioniert perfekt, aber ich muss etwas hinzufügen, und leider greift das Plugin Header-Zeilen, wo es nicht auf der Zeile, die ich markiert habe, sollte.

$(document).ready(function(){ 
 
\t $('#mytable1').tSquash({'pixels':'350','titleColumn':'headings w4','textColumn':'redtext'}); 
 
\t $('#mytable2').tSquash({'pixels':'600','titleColumn':'headings w5'}); 
 
}); 
 

 

 
// tSquash V1.0.0 
 
;(function($) { 
 
\t "use strict"; 
 
\t $.fn.tSquash = function(options,callback) { 
 
\t \t var settings =$.extend(true, {},{ 
 
\t \t \t 'pixels':480, 
 
\t \t \t 'titleColumn':"", 
 
\t \t \t 'textColumn':"", 
 
\t \t },options); 
 
\t 
 
\t var base=$(this),$rowCells; 
 
\t 
 

 
\t base.resize=function() 
 
\t { 
 
\t \t $(window).resize(function(){ 
 
\t \t \t base.change(); 
 
\t \t }); 
 
\t } 
 
\t base.change=function() 
 
\t { 
 
\t \t if($(window).width() < settings.pixels){ 
 
\t \t \t base.minify(); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t base.enlarge(); 
 
\t \t } 
 
\t } 
 
\t base.minify=function() 
 
\t { 
 
\t \t if(base.find('th').eq(0).attr('class')!="tSquash") 
 
\t \t { 
 
\t \t \t var tablename = '#'+$.trim(base.attr('id')); 
 
\t \t \t // Count columns 
 
\t \t \t var columnCount = $(tablename+' thead th').length; 
 
\t \t \t // get table head text into array $myheadertext 
 
\t \t \t var $headCells = $(base).find('thead tr:first').children(); 
 
\t \t \t var $myheadertext = $headCells.map(function() { 
 
\t \t \t \t return $(this).text(); 
 
\t \t \t }).get(); 
 
\t \t \t \t 
 
\t \t \t //This adds a column and gives it the class of tSquash \t \t 
 
\t \t \t base.find('tr').each(function(){//This is supposed to only get body tr but it is getting header tr too 
 
\t \t \t \t //get body text 
 
\t \t \t \t $rowCells=$(this).children(); 
 
\t \t \t \t var $bodyText=$rowCells.map(function() { 
 
\t \t \t \t \t return $(this).text(); 
 
\t \t \t \t }).get(); 
 
\t \t \t \t 
 
\t \t \t \t $(this).find('td').eq(0).before('<td></td>'); 
 
\t \t \t \t $(this).find('th').eq(0).before('<th></th>'); 
 
\t \t \t \t $(this).find('td').eq(0).addClass("tSquash"); 
 
\t \t \t \t $(this).find('th').eq(0).addClass("tSquash"); 
 
\t \t \t 
 
\t \t \t \t for(var i=0;i<columnCount;i++) 
 
\t \t \t \t { \t 
 
\t \t \t \t \t //Add text to first column 
 
\t \t \t \t \t $(this).find('td').eq(0).append('<span class="'+settings.titleColumn+'">'+$myheadertext[i]+': </span><span class="'+settings.textColumn+'">'+$bodyText[i]+'</span></br>'); 
 
\t \t \t \t \t $(this).find('td').eq(i+1).hide(); 
 
\t \t \t \t \t $(this).find('th').eq(i+1).hide(); 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t }) 
 
\t \t \t 
 
\t \t \t \t \t 
 
\t \t } 
 
\t } 
 
\t base.enlarge=function() 
 
\t { 
 
\t \t $('.tSquash').remove(); 
 
\t \t base.find('td').show(),base.find('th').show(); 
 
\t } 
 
\t base.change(); 
 
\t base.resize(); 
 
\t return base; 
 
\t \t 
 
\t } 
 
\t 
 
})(jQuery);

tbody{ 
 
border: 1px solid #000; \t 
 
\t 
 
} 
 
tbody td{ 
 
border: 1px solid #000; 
 
padding:10px; \t 
 
} 
 

 
#mytable2{ 
 
100%; \t 
 
} 
 

 
.headings{ 
 
\t font-weight: bolder; 
 
\t display:inline-block; 
 
} 
 
.redtext 
 
{ 
 
\t color:red; 
 
} 
 

 

 
.w4 
 
{ 
 
\t width: 4em; 
 
} 
 
.w5 
 
{ 
 
\t width: 5em; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
\t <title>Test</title> 
 
    <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
 
\t <META HTTP-EQUIV="Expires" CONTENT="-1"> 
 
    
 
    <link rel="stylesheet" type="text/css" href="test.css"> 
 
</head> 
 

 
<body> 
 
    <table id="mytable1" style="width:100%"> 
 
     <thead> 
 
     \t <tr> 
 
       <th>The</th> 
 
       <th>First</th> 
 
       <th>Stage</th> 
 
       <th>Is</th> 
 
       <th>The</th> 
 
       <th>Hardest</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
     \t <tr id="t_1"><td>To</td><td>be</td><td>or</td><td>not</td><td>to</td><td>be</td></tr> 
 
      <tr id="t_2"><td>This</td><td>I</td><td>Believe</td><td>is</td><td>the</td><td>last</td></tr> 
 
      <tr id="t_3"><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
      <tr id="t_4"><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
      <tr id="t_5"><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
      <tr id="t_6"><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
     </tbody> 
 
    </table> 
 
<div id="test"></div> 
 
<script type="text/javascript" src="jquery-1.11.0.min.js"></script> 
 
<script type="text/javascript" src="test.js"></script> 
 
</body> 
 

 
<body> 
 
    <table id="mytable2" style="width:100%"> 
 
     <thead> 
 
     \t <tr> 
 
       <th>I</th> 
 
       <th>Am</th> 
 
       <th>An</th> 
 
       <th>Elephant</th> 
 
       <th>Man</th> 
 
       <th>Today</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
     \t <tr><td>To</td><td>be</td><td>or</td><td>not</td><td>to</td><td>be</td></tr> 
 
      <tr><td>This</td><td>I</td><td>Believe</td><td>is</td><td>the</td><td>last</td></tr> 
 
      <tr><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
      <tr><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
      <tr><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
      <tr><td>The</td><td>First</td><td>Stage</td><td>is</td><td>the</td><td>hardest</td></tr> 
 
     </tbody> 
 
    </table> 
 
<div id="test"></div> 
 
<script type="text/javascript" src="jquery-1.11.0.min.js"></script> 
 
<script type="text/javascript" src="test.js"></script> 
 
</body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</html>

Answer 1

Zugriff Einfach tbody es die es richtige Weise zu tun ist.

base.find('tbody tr').each(function(){ 

_{(PS:., Auch wenn Sie nicht speziell das <tbody> Element verwendet hat, wird es durch den Browser standardmäßig hinzugefügt wird)}

var $table = $("table"); // Or as you use it: $(this) Supposingly a table... 
 

 
$table.find('tbody tr').each(function() {  
 
    
 
    var $rowCells = $(this).find("td"); // TDs of the current iterating TR 
 
    var bodyText = $rowCells.map(function() { // Array to hold all TD text 
 
    return $(this).text(); 
 
    }).get(); 
 
    
 
    // HERE Do something with `bodyText` Array, 
 
    // otherwise will got substituted with new values 
 
    // in the second TR iteration 
 
    console.log(bodyText); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <td colspan="4">Head</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>TR1 Cell 1</td> 
 
     <td>TR1 Cell 2</td> 
 
     <td>TR1 Cell 3</td> 
 
     <td>TR1 Cell 4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>TR2 Cell 1</td> 
 
     <td>TR2 Cell 2</td> 
 
     <td>TR2 Cell 3</td> 
 
     <td>TR2 Cell 4</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Wenn Sie eingeben eine Endlosschleife, die wahrscheinlich auf einige andere Probleme in Ihrem Plugin zurückzuführen ist.

Answer 2

Ich habe das Problem gelöst. Das Problem war nicht an dem Ort, an dem ich es dachte, aber es wurde durch einen anderen Teil des Codes verursacht, der die Größe der Seite änderte und meine Routine immer wieder anrief und das ist meine Lösung.

var base=$(this); 
var minify=true; 

Am Anfang. So dass meine Minify-Funktion nur ausgeführt wird, wenn es wahr ist. Wenn die Bildschirmgröße niedriger als die Einstellung ist, wird minify einmal ausgeführt, und minify wird auf false gesetzt, sodass sie erst wieder ausgeführt wird, wenn die Bildschirmgröße größer ist.

base.change=function() 
{ 
    if($(window).width() < settings.pixels){ 
     if(minify) base.minify(); 
    } 
    else 
    { 
     base.enlarge(); 
    } 
} 

Dann in meiner minify Funktion sehe ich das

base.minify=function() 
    { 
     minify=false; 
snip 

dann in meiner Funktion vergrössern mache ich das

base.enlarge=function() 
{ 
    $('.tSquash').remove(); 
    base.find('td').show(),base.find('th').show(); 
    minify=true; 
} 

ich minify zurück auf true gesetzt.

Aber das ist auch die Antwort, die mein Problem gelöst hat Roko C. Buljan hat die richtige Antwort auf meine eigentliche Frage gegeben, also werde ich ihm die Zecke geben. Danke Roko für die Hilfe.

PS. Soll ich den korrigierten Code posten oder was? (Um jemand anderen zu helfen, frage ich mich)