屬性返回未定義表

我對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

闡釋：

相關問題