属性返回未定义表

我对JQuery相当陌生，遇到以下问题。我正在制作一个网站，显示一个表，其中隐藏了colspan = 4的行。当您单击一行时，下面的行（之前隐藏）应该滑出，被点击的行应该有红色背景和白色文本颜色。如果再次点击同一行，下面的行应该再次切换滑块，点击的行应该返回到前一个布局（在我的例子中是白色的BG和黑色的文本）。属性返回未定义表

slideToggle工作正常，但颜色会出现问题。 HTML和JQuery如下。

HTML：

<table> 
    <tr> 
     <td>Test 1</td> 
     <td>Test 2</td> 
     <td>Test 3</td> 
     <td>Test 4</td> 
    </tr> 
    <tr> 
     <td colspan="4"> This is the first hidden row</td> 
    </tr> 
</table>

CSS：

table{ 
border-collapse: collapse; 
} 

td{ 
color: black; 
background-color: white; 
}

JQuery的：

$(function() { 
    $("td[colspan=4]").hide(); 
    $("table").click(function (event) { 
     event.stopPropagation(); 
     var $target = $(event.target); 
     if ($target.closest("td").attr("colspan") > 1) { 
      } else { 
       $target.closest("tr").next().find("td").slideToggle("fast"); 

      } 


    } 
    ); 
});

现在，上面的代码应该工作，但是当我插入一个if-else来检查隐藏的行是否隐藏，我经常得到未定义或可见（我通过警报检查）。同样，如果我检查点击行的颜色属性，我经常会得到Undefined。

我想，我需要这样的东西：

检查点击TR的属性：

if($target.closest("tr").attr("color") === "black"){$target.closest("tr").css("color","white").css("background-color","red");} 
else{ 
$target.closest("tr").css("color","black").css("background-color","white");}

检查是否隐藏的行实际上是隐藏：

if($target.closest("tr").next().find("td").is(":visible")){$target.closest("tr").css("color","white").css("background-color","red");} 
else{ 
$target.closest("tr").css("color","black").css("background-color","white");}

如果这个问题太含糊，我很抱歉。如有必要，我可以多说些话。

的jsfiddle：https://jsfiddle.net/qeg2zb7e/

来源

2016-10-22 ThomasDM

哪里是你的CSS代码？ –

添加jsfiddle工作链接，以便我们可以检查发生了什么 –

提示：'tr.selected {background-color：red} tr.hidden {display：none}''.addClass（“selected”）''''.removeClass（ “隐藏”）' – Andreas

添加在这个jQuery代码在其他条件下

$ target.closest（“tr”）。find（“td”）。toggleClass（'bg-text'）;

并且还将（bg-text）类放入css风格。

$(function() { 
 
    $("td[colspan=4]").hide(); 
 
    $("table").click(function (event) { 
 
    event.stopPropagation(); 
 
    var $target = $(event.target); 
 
    if ($target.closest("td").attr("colspan") > 1) { 
 
    } 
 
    else { 
 
     //add this code 
 
     $target.closest("tr").find("td").toggleClass('bg-text'); 
 
     
 
     $target.closest("tr").next().find("td").slideToggle("fast"); 
 
    } 
 
    }); 
 
});

table{ 
 
\t \t border-collapse: collapse; 
 
\t } 
 
\t td{ 
 
\t \t color: black; 
 
\t \t background-color: white; 
 
\t } 
 

 
/*toggle class for red background and white text color*/ 
 
\t .bg-text{ 
 
\t \t background: red; 
 
\t \t color: white; 
 
\t }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
\t <title>Menu Collapse</title> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-12"> 
 
\t \t \t <table class="table table-bordered"> 
 
\t \t  <tr> 
 
\t \t  <td>Test 1</td> 
 
\t \t  <td>Test 2</td> 
 
\t \t  <td>Test 3</td> 
 
\t \t  <td>Test 4</td> 
 
\t \t  </tr> 
 
\t \t  <tr> 
 
\t \t  <td colspan="4"> This is the first hidden row - 1</td> 
 
\t \t  </tr> 
 
\t \t  <tr> 
 
\t \t  <td>Test 1.1</td> 
 
\t \t  <td>Test 2.1</td> 
 
\t \t  <td>Test 3.1</td> 
 
\t \t  <td>Test 4.1</td> 
 
\t \t  </tr> 
 
\t \t  <tr> 
 
\t \t  <td colspan="4"> This is the first hidden row 1.1</td> 
 
\t \t  </tr> 
 
       <tr> 
 
\t \t  <td>Test 1.2</td> 
 
\t \t  <td>Test 2.3</td> 
 
\t \t  <td>Test 3.4</td> 
 
\t \t  <td>Test 4.5</td> 
 
\t \t  </tr> 
 
\t \t  <tr> 
 
\t \t  <td colspan="4"> This is the first hidden row 1.2</td> 
 
\t \t  </tr> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2016-10-22 07:05:45

谢谢！现在完美的作品:) – ThomasDM

好的:) @ThomasDM –

更简单的方法可能是这样的：

jsFiddle example

$('#my-table').on('click', '.open-row',function(){ 
 
    var $targets = $('.target-row'); 
 
    var $triggers = $('.open-row'); 
 
    var $this=$(this).toggleClass('active'); 
 
    var currentIndex = $triggers.index($this); 
 
    var $target = $targets.eq(currentIndex).slideToggle('fast'); 
 
});

.open-row.active{ 
 
    background-color:red; 
 
    
 
} 
 
.target-row{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="my-table"> 
 
    <tr class="open-row"> 
 
     <td>Test 1</td> 
 
     <td>Test 2</td> 
 
     <td>Test 3</td> 
 
     <td>Test 4</td> 
 
    </tr> 
 
    <tr class="target-row"> 
 
     <td colspan="4"> This is the first hidden row</td> 
 
    </tr> 
 
</table>

阐释：

$('#my-table').on('click', '.open-row',function(){侦听在＃我的表和检查，点击，如果你点击一个子带班open-row
var $targets = $('.target-row');得到所有隐藏的行的集合
var $triggers = $('.open-row');得到所有可点击行的集合
var $this=$(this).toggleClass('active');切换类active点击的元件
var currentIndex = $triggers.index($this);这将返回所点击的元素的索引或位置在ARR上点击元素
$targets.eq(currentIndex).slideToggle('fast');线之上被传递到EQ这里返回目标行是相同的索引被点击的行即点击行下面的行，然后调用它的slideToggle

来源

2016-10-22 06:35:59 DelightedD0D

谢谢你的回答，但是即使复制了你的代码并改变了必要的东西以适应它，但它也没有成功。自从你的代码片段工作以来，最有可能的是我的错。我会在稍后进一步研究它。谢谢你的时间。 – ThomasDM

@ThomasDM注意它需要你添加id my-table到这个表（或者其他的id）并且把这些类添加到'tr's。 Id打赌其中一个缺少 – DelightedD0D

属性返回未定义表

回答

jsFiddle example

阐释：

相关问题