jQueryでテーブルの行の生成消滅を行いたい場合はdivタグを使わずtrタグにidを付ける

 古いシステムに jQuery を入れる必要があったのですが、要素の生成消滅をdivタグで行えなかったため詰まってしまいました。よく見ると懸案の要素がテーブルの trタグで挟まれた部分だったので、trにidを付けて display:inline ではなく display:table-row とすると解決しました。参考になったサイトは

https://into-the-program.com/tr-display-block-none/

です。またあるかもしれないので関連部分のスクリプトを残しておきます。Yes/No のラジオボタンでYesを選ぶと日付入力欄が表示されるというものです。デフォルトはNoで、入力欄非表示。

●HTML部分（テーブルの一部）

<tr>

    <th nowrap="nowrap">有給対象者</th>

    <td>

<input type="radio" name="yes_no" id ="option01_1" value="1" />YES

<input type="radio" name="yes_no" id ="option01_2" value="2" checked />NO

　</td>

</tr>

<tr id="option01">

    <th nowrap="nowrap">入社日</th>

    <td>

<input type="text" name="in_date" id="datepicker01" title="日付を選択してください" validate="required:true" />

　 </td>

</tr>

●js, css部分

<script>

$\$$.metadata.setType("attr","validate");
$\$$(function(){
// validate signup form on keyup and submit
$\$$("#basicData").validate({
});
$\$$("#option01_1").click(function() { 
var chkID = document.getElementById('option01');
chkID.style.display='table-row'; /*入力欄表示*/
});
$\$$("#option01_2").click(function() { 
var chkID = document.getElementById('option01');
chkID.style.display = 'none'; /*非表示*/
});
$\$$("#datepicker01").datepicker();
});
</script>
<!-- CSS -->
<style>
#option01{
display:none; /*領域 非表示*/
}
</style>