Question

我对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/

Answer 1

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

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(){收听＃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

Answer 2

在else条件

中添加此jQuery代码

<强> $ target.closest（＆＃34; TR＆＃34）。发现（＆＃34; TD＆＃34）。toggleClass（＆＃39; BG-文本＆＃39）;

还将（bg-text）类放入css样式。

＆＃13;

$(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;

表

2 个答案:

jsFiddle example

阐释：