我有一个具有正确 thead 和 tbody 的表。我正在抓取表中的所有表行来处理它们，但不幸的是它也抓取了标题。这是我的代码:
var base=$(this),$rowCells;
base.find('tr').each(function(){
//get body text
$rowCells=$(this).children();
var $bodyText=$rowCells.map(function() {
return $(this).text();
}).get();
})
好的，这是我尝试过的
base.find('tbody tr').each(function())
但这有点疯狂，进入了一个永恒的循环并以一种很大的方式消亡。 也尝试过
base.find('tbody > tr').each(function())
但这又不起作用，并且基本上像以前一样使我的浏览器崩溃。 顺便说一句，这段代码不是唯一的代码，而是重要的循环部分。这只是我正在编写的 jquery 插件的一小部分。
只是想知道如何定位 tbody 而不是 thehead。
我被要求发布更多代码。这是我完整的 jquery 插件。它的作用是创建一个新列并将所有行放入第一列并隐藏所有其他行，以便可以在手机上查看。该插件工作完美，但我需要向其中添加一些内容，不幸的是，该插件正在抓取不应在我标记的行上的标题行。
$(document).ready(function(){
$('#mytable1').tSquash({'pixels':'350','titleColumn':'headings w4','textColumn':'redtext'});
$('#mytable2').tSquash({'pixels':'600','titleColumn':'headings w5'});
});
// tSquash V1.0.0
;(function($) {
"use strict";
$.fn.tSquash = function(options,callback) {
var settings =$.extend(true, {},{
'pixels':480,
'titleColumn':"",
'textColumn':"",
},options);
var base=$(this),$rowCells;
base.resize=function()
{
$(window).resize(function(){
base.change();
});
}
base.change=function()
{
if($(window).width() < settings.pixels ){
base.minify();
}
else
{
base.enlarge();
}
}
base.minify=function()
{
if(base.find('th').eq(0).attr('class')!="tSquash")
{
var tablename = '#'+$.trim(base.attr('id'));
// Count columns
var columnCount = $(tablename+' thead th').length;
// get table head text into array $myheadertext
var $headCells = $(base).find('thead tr:first').children();
var $myheadertext = $headCells.map(function() {
return $(this).text();
}).get();
//This adds a column and gives it the class of tSquash
base.find('tr').each(function(){//This is supposed to only get body tr but it is getting header tr too
//get body text
$rowCells=$(this).children();
var $bodyText=$rowCells.map(function() {
return $(this).text();
}).get();
$(this).find('td').eq(0).before('<td></td>');
$(this).find('th').eq(0).before('<th></th>');
$(this).find('td').eq(0).addClass("tSquash");
$(this).find('th').eq(0).addClass("tSquash");
for(var i=0;i<columnCount;i++)
{
//Add text to first column
$(this).find('td').eq(0).append('<span class="'+settings.titleColumn+'">'+$myheadertext[i]+': </span><span class="'+settings.textColumn+'">'+$bodyText[i]+'</span></br>');
$(this).find('td').eq(i+1).hide();
$(this).find('th').eq(i+1).hide();
}
})
}
}
base.enlarge=function()
{
$('.tSquash').remove();
base.find('td').show(),base.find('th').show();
}
base.change();
base.resize();
return base;
}
})(jQuery);tbody{
border: 1px solid #000;
}
tbody td{
border: 1px solid #000;
padding:10px;
}
#mytable2{
100%;
}
.headings{
font-weight: bolder;
display:inline-block;
}
.redtext
{
color:red;
}
.w4
{
width: 4em;
}
.w5
{
width: 5em;
}<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<table id="mytable1" style="width:100%">
<thead>
<tr>
<th>The</th>
<th>First</th>
<th>Stage</th>
<th>Is</th>
<th>The</th>
<th>Hardest</th>
</tr>
</thead>
<tbody>
<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>
<tr>
<th>I</th>
<th>Am</th>
<th>An</th>
<th>Elephant</th>
<th>Man</th>
<th>Today</th>
</tr>
</thead>
<tbody>
<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> 最佳答案
只需访问tbody这是正确的做法。
base.find('tbody tr').each(function(){
(P.S:即使您没有专门使用 <tbody> 元素，浏览器也会默认添加它。)
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>如果您进入无限循环，则很可能是由于插件中的其他一些问题造成的。
关于jquery - 获取表体行，但不获取表头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39166221/