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/
のですか? –
jsfiddleの作業リンクを追加して、何が起きているかを確認することができます –
ヒント: 'tr.selected {background-color:red} trhidden {display:none}' '.addClass(" selected ")'、 '.removeClass( "hidden") ' – Andreas