属性返回未定义表
我对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");}
OR
检查是否隐藏的行实际上是隐藏:
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/
添加在这个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>
谢谢!现在完美的作品:) – 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上点击元素 的y
-
$targets.eq(currentIndex).slideToggle('fast');
线之上被传递到EQ这里返回目标行是相同的索引被点击的行即点击行下面的行,然后调用它的slideToggle
谢谢你的回答,但是即使复制了你的代码并改变了必要的东西以适应它,但它也没有成功。自从你的代码片段工作以来,最有可能的是我的错。我会在稍后进一步研究它。谢谢你的时间。 – ThomasDM
@ThomasDM注意它需要你添加id my-table到这个表(或者其他的id)并且把这些类添加到'tr's。 Id打赌其中一个缺少 – DelightedD0D
哪里是你的CSS代码? –
添加jsfiddle工作链接,以便我们可以检查发生了什么 –
提示:'tr.selected {background-color:red} tr.hidden {display:none}''.addClass(“selected”)''''.removeClass( “隐藏”)' – Andreas