Iこのフィドルに示すように、次のHTML構造を持っている - https://jsfiddle.net/0r277q7r/4/jQueryの変更高さを自動的
表1にいくつかの行は次のようにshwonと、チェックボックスのチェックに隠されている -
function hideshow(){
if($('#checkShow').is(':checked')){
$('.before').hide();
$('.after').show();
}else{
$('.before').show();
$('.after').hide();
}
}
チェックボックスをオンにすると、table1の一部の行が非表示になり、その他の行が表示されます。
テーブル2の高さをテーブル1の高さを変更して変更すると、両方のテーブルの高さが同じになります。
jqueryコードはどのようなものになりますか？
ありがとうございました。
idは
table1を言うと
id
table3を持っているあなたの第二のテーブルを変更するあなたのメインテーブルを与える場合は、
table1に高さを与える
function hideshow() {
$('.before').toggle();
$('.after').toggle();
}
あなたのjqueryのはtoggle()機能で2行に減少させることができる
PXに次いで
function hideshow() {
$('.before').toggle();
$('.after').toggle();
}#table1 {
height: 100px;
}
#table2 {
height: 100%;
}
#table3 {
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="border:1px solid black">
<tr>
<td>
<table style="border:1px solid black" id="table2">
<tr class="before">
<td>some content</td>
</tr>
<tr class="before">
<td>some content</td>
<td>some other content</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkShow" onclick="hideshow();" />
</td>
</tr>
<tr class="after" style="display:none">
<td>show only when check is checked</td>
</tr>
</table>
</td>
<td>
<table style="border:1px solid black" id="table3">
<tr>
<td>other div2 stuff here</td>
</tr>
</table>
</td>
</tr>
</table>table2と
table3の高さを変更します
親テーブル（table1）に固定高さを与えたくない場合はどうしたらいいですか？ –
@NalinAgrawal \t 'height：100％;'は親のCSSからの既知の高さが必要です。そうでなければ100％ではありません。 – depperm
私はそれを理解しています。しかし、私の要件が私の親テーブルに固定された高さを与えることが本当にできない場合はどうですか？私の親テーブルの作業に最小高さ：100pxを提供しますか？それ以外の方法はありますか？ –
これを試してみてください：
$(document).ready(function(){
$("#checkShow").on("change",function(){
var state = $(this).prop("checked");
if (state) {
$('.before').hide();
$('.after').show();
}
else {
$('.before').show();
$('.after').hide();
}
})
})
決勝コード：
<html>
<title>This is test</title>
<head>
</head>
<body>
<table border="1">
<tr>
<td>
<table style="border:1px solid black" id="table2">
<tr class="before">
<td>some content</td>
</tr>
<tr class="before">
<td>some content</td>
<td>some other content</td>
</tr>
<tr>
<td><input type="checkbox" id="checkShow"/></td>
</tr>
<tr class="after">
<td>show only when check is checked</td>
</tr>
</table>
</td>
<td>
<table style="border:1px solid black" id="table2">
<tr>
<td>other div2 stuff here</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkShow").on("change",function(){
var state = $(this).prop("checked");
if (state) {
$('.before').hide();
$('.after').show();
}
else {
$('.before').show();
$('.after').hide();
}
})
})
</script>
</body>
</html>
両方あなたのテーブル持って同じ 'id'、' id'sは一意である必要があります – depperm
Iをhttps://github.com/mattbanks/jQuery.equalHeightsを使用するとうまくいきます。 – Enkode
@depperm：細部までこだわっていないでください。おそらくタイプミス。 ：） 更新しました。 –