【DAY003】jQueryでtable要素のtd項目を動的に追加する

やりたいこと

jQueryでtable要素のtd項目を動的に追加する

具体的には、 動的に増やしたtbody内に存在する、select内容によって表示するtd項目を動的に切り替えたい

html

<table id="test-contents">
-- (略) --
<tbody>
    <tr>
         <td>
             <select class="select-option">
                  <option value="1"></option>
                  <option value="2"></option>
             </select>
        </td>
        <td display:none>1を選んだら表示するよ</td>
        <td display:none>2を選んだら表示するよ</td>
        <td class="addrow">+</td>
    <tr>
</tbody>

addrow のscriptは割愛。

動作としては、「+」を押下することで、tbodyが下にcloneされる。

結果として↓になる。

<table id="test-contents">
-- (略) --
<tbody>
    <tr>
         <td>
             <select class="select-option">
                  <option value="1"></option>
                  <option value="2"></option>
             </select>
        </td>
        <td display:none>1を選んだら表示するよ</td>
        <td display:none>2を選んだら表示するよ</td>
        <td class="addrow">+</td>
    <tr>
</tbody>
<tbody>
    <tr>
         <td>
             <select class="select-option">
                  <option value="1"></option>
                  <option value="2"></option>
             </select>
        </td>
        <td display:none>1を選んだら表示するよ</td>
        <td display:none>2を選んだら表示するよ</td>
        <td class="addrow">+</td>
    <tr>
</tbody>

当初詰まったポイントは、class="select-option" をイベントのトリガーにしているため、上方のtbodyにしか結果が反映されない、というところ。

script (jQuery)

closestが全て解決してくれた

$('.select-option').change(function() {

    if($(this).closest('option:selected').val == "1") {
        $(this).closest('tr').children('td:eq(1)').show('slow');
        $(this).closest('tr').children('td:eq(2)').hide(1000);

    } else if ($(this).closest('option:selected').val == "2") {
        $(this).closest('tr').children('td:eq(2)').show('slow');
        $(this).closest('tr').children('td:eq(1)').hide(1000);        
    }
});

tbodyが追加される際に、data- 属性を追加しようとかごちゃごちゃ考えていたけれど、closest で直前の要素を拾ってくる方がはるかにスマートでした。

うろ覚えで書いているので、間違っている可能性もある。 明日確認します。

また、さらにスマートな手法がありましたら、ご教授いただければ幸いです！！！