2016-10-22 4 views
1

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:今すぐ上記のコード

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

      } 


    } 
    ); 
}); 

動作するはずですが、:jQueryの

table{ 
border-collapse: collapse; 
} 

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

私は隠れた行が隠れているかどうかを調べるために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

jsfiddleの作業リンクを追加して、何が起きているかを確認することができます –

+0

ヒント: 'tr.selected {background-color:red} trhidden {display:none}' '.addClass(" selected ")'、 '.removeClass( "hidden") ' – Andreas

答えて

0

追加をslideToggleを呼び出し、つまりクリックした行と同じインデックスにあるターゲット行を返す上記のここに等量に渡さラインこのjQueryコードをelse条件にします。

$ target.closest( "tr")。find( "td")。toggleClass( 'bg-text');

また、(bg-text)クラスをCSSスタイルにする。あなたの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>

+0

ありがとう!今すぐ完璧に動作します:) – ThomasDM

+0

Ok :) @ThomasDM –

0

簡単な方法は、このようなものかもしれません:

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>


、について説明:あなたはクラスopen-row
  • var $targets = $('.target-row');で子をクリックした場合
    • var $triggers = $('.open-row');はすべてクリック可能な行のコレクションを取得し、すべての非表示の行のコレクションを取得します。#私のテーブルや小切手上のクリックを待機します
    • var $this=$(this).toggleClass('active');これはARRでクリックされた要素のインデックスまたは位置を返しますvar currentIndex = $triggers.index($this);
    • クリックした要素のクラス activeを切り替えますクリック可能な要素のAY
    • $targets.eq(currentIndex).slideToggle('fast');クリックした行の下の行は、それに
  • +0

    あなたの答えをありがとう、悲しいことに、あなたのコードをコピーしてそれに合うように必要なものを変更しても、それはうまく動作しませんでした。ほとんどの場合、スニペットが機能しているので、間違いは私と一緒です。私は後でそれをさらに調べます。 yor時間ありがとうございます。 – ThomasDM

    +0

    @ThomasDMは、 'my-table'というIDをテーブル(または他のid)に追加し、そのクラスを' tr'に追加する必要があることに注意してください。彼らのうちの1つが不足していることを賭けている – DelightedD0D

    関連する問題