残プロ 第-32回 ~HTMLの子要素を取得する~

for文を意識したHTML

task.csv

.html

前々回でjinja2によるテンプレートfor文を利用しました．
id指定の際，個別にするのでなくテンプレートを使用することで利便性が高まります．

<tbody>
    {% for task in tasks_csv[1:] %}
    <tr id={{ task[0] }}>
        <th scope='row'>{{ task[1] }}</th>
        <td>{{ task[2] }}</td>
        <td>{{ task[3] }}</td>
        <td>{{ task[4] }}</td>
        <td>{{ task[5] }}</td>
        <td>
            <div class="form-group">
                <select class="form-control" onchange="replaceForm();">
                    <option value="">-</option>
                    <option value="Edit">Edit</option>
                    <option value="Delete">Delete</option>
                </select>
            </div>
        </td>
    </tr>
    {% endfor %}
</tbody>

<script>
    let row;
    let select;
    let col_1;
    let tasks = {{ tasks_csv|tojson }}
    let len = tasks.length

    function replaceForm(){
        for (let i=1; i<len; i++){
            row = document.getElementById(tasks[i][0]);
            console.log(row.children)
        }
    }
</script>

ここで注意なのですが，JavaScriptの関数内でjinja2のテンプレートは使用できません．新たに配列を用意しjson化したのち，代入することで利用できるようになります．