我对JQuery很新,遇到了以下问题。 我正在创建一个网站,显示一个表格,其中隐藏了colspan = 4的行。 当您单击一行时,下面的行(之前隐藏的)应该滑出,并且单击的行应该具有红色背景和白色文本颜色。如果再次单击该行,则下面的行应再次切换滑动,并且单击的行应返回到先前的布局(在我的情况下为白色BG和黑色文本)。
slideToggle有效,但颜色会出现问题。 HTML en 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或Visible(我检查了警报)。如果我检查单击行的颜色属性,我通常会得到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/
答案 0 :(得分:0)
更简单的方法可能是这样的:
$('#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(){
收听#my-table上的点击次数,并检查您是否点击了班级为open-row
的孩子var $targets = $('.target-row');
获取所有隐藏行的集合var $triggers = $('.open-row');
获取所有可点击行的集合var $this=$(this).toggleClass('active');
切换点击元素active
var currentIndex = $triggers.index($this);
这将返回可点击元素数组中被点击元素的索引或位置$targets.eq(currentIndex).slideToggle('fast');
上面的行传递到eq这里返回与点击的行位于同一索引的目标行,即点击的行下方的行然后调用slideToggle 答案 1 :(得分:0)
在else条件
中添加此jQuery代码<强> $ target.closest(&#34; TR&#34)。发现(&#34; TD&#34)。toggleClass(&#39; BG-文本&#39); 强>
还将(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");
}
});
});
&#13;
table{
border-collapse: collapse;
}
td{
color: black;
background-color: white;
}
/*toggle class for red background and white text color*/
.bg-text{
background: red;
color: white;
}
&#13;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu Collapse</title>
<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">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<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 - 1</td>
</tr>
<tr>
<td>Test 1.1</td>
<td>Test 2.1</td>
<td>Test 3.1</td>
<td>Test 4.1</td>
</tr>
<tr>
<td colspan="4"> This is the first hidden row 1.1</td>
</tr>
<tr>
<td>Test 1.2</td>
<td>Test 2.3</td>
<td>Test 3.4</td>
<td>Test 4.5</td>
</tr>
<tr>
<td colspan="4"> This is the first hidden row 1.2</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
&#13;