私は非常に近いと思いますが、完全ではありません...要するに、テーブルの上部の入力フィールドにデータが存在するかどうかに応じて、テーブルの下部を表示しようとしています (ステップ 2) (ステップ1)。ドキュメントの初期ロードと変更時に、jQuery を介して removeClass を使用しようとしています。
注意してください:ここに含まれているのは複数のスクリプトです - 私の経験不足を示すものではありませんが、これを解決するために一生懸命働いてきたことを示すために、これらは私の複数の試みです...
<table>
<tr align="center">
<td colspan="2">
<hr>
</td>
</tr>
<tr id="Step1ID">
<td valign="middle">Step 1 Data:</td>
<td valign="middle">
<input type="text" id="Step1Data" name="Step1Data" size="8" maxlength="8" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<hr>
</td>
</tr>
<tr id="Step2ID" class="hideS2">
<td>Step2 Data:</td>
<td>
<input type="text" id="Step2Data" name="Step2Data" size="8" maxlength="8" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<hr>
</td>
</tr>
</table>
$(document).ready(function () {
var Step1Data = $("#Step1Data").val();
if (Step1Data === '') {} else {
$('tr').removeClass('hideS2');
}
$(document).on('change', '#Step1ID', function () {
var Step1Data = $.trim(("#Step1Data").val());
if (Step1Data === '') {} else {
$('tr').removeClass('hideS2');
}
});
$(body).on('change', '#Step1ID', function () {
var Step1Data = $.trim(("#Step1Data").val());
if (Step1Data === '') {} else {
$('tr').removeClass('hideS2');
}
});
$('#Step1ID').on('change', '#Step1Data', function () {
var Step1Data = $.trim(("#Step1Data").val());
if (Step1Data === '') {} else {
$('tr').removeClass('hideS2');
}
});
$("Step1Data").blur(function () {
var Step1Data = $.trim(("#Step1Data").val());
if (Step1Data === '') {} else {
$('tr').removeClass('hideS2');
}
});
$("Step1ID").focusout(function () {
var Step1Data = $.trim(("#Step1Data").val());
if (Step1Data === '') {} else {
$('tr').removeClass('hideS2');
}
});
});
.hideS2 {
display: none;
}