Question

我有一个正确的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而不是thead。

我被要求发布更多代码。这是我的完整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>

Answer 1

只需访问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>

如果由于插件中的其他一些问题而进入了一个最可能的无限循环。

Answer 2

我已经解决了这个问题。问题不在我认为的地方，但它是由代码的另一部分引起的，它检查了调整页面的大小并且一遍又一遍地调用我的例程，所以这是我的溶液

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

一开始。所以我的minify函数只在它成立时运行。当屏幕尺寸低于设置时，它会缩短一次，然后将minify设置为false，这样它就不会再次运行，直到屏幕尺寸变大为止。

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

然后在我的minify函数中我这样做

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

然后在我的放大功能中我这样做

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

我将minify设置回true。

然而，即使这是解决我的问题的答案，Roko C. Buljan给出了我实际问题的正确答案，所以我会给他打勾。感谢Roko的帮助。

PS。我应该发布更正后的代码还是什么？（为了帮助别人，我想知道）

获取正文表行，但不是表头

2 个答案: