JavaScriptのタスクフォーム作成

JavaScriptでのタスクフォーム作成

タスクフォーム単体

• id="task-card-${task.task_id}"は更新キャンセルの際に便利
• 削除、更新ボタンにdata-id="${task.task_id}"を仕込んでおくと削除、更新する際に便利

<div class="col" id="task-card-${task.task_id}">
    <div class="card mb-3" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title">${task.task_name}</h5>
            <h6 class="card-subtitle mb-2 text-body-secondary">締切: ${task.task_deadline}</h6>
            <h6 class="card-subtitle mb-2 text-body-secondary">状態: ${task.task_status}</h6>
            <p class="card-text">${task.task_detail}</p>
            <button type="button" class="btn btn-warning w-100 mt-2 updateButton" data-id="${task.task_id}">変更</button>
            <button type="button" class="btn btn-danger w-100 mt-2 deleteButton" data-id="${task.task_id}">削除</button>
        </div>
    </div>
</div>

tasks.forEachで作成した複数のタスクフォーム

• 初期化のためlet htmlContent = '';

let htmlContent = '';
tasks.forEach(function(task){
    htmlContent += `
        <div class="col" id="task-card-${task.task_id}">
            <div class="card mb-3" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">${task.task_name}</h5>
                    <h6 class="card-subtitle mb-2 text-body-secondary">締切: ${task.task_deadline}</h6>
                    <h6 class="card-subtitle mb-2 text-body-secondary">状態: ${task.task_status}</h6>
                    <p class="card-text">${task.task_detail}</p>
                    <button type="button" class="btn btn-warning w-100 mt-2 updateButton" data-id="${task.task_id}">変更</button>
                    <button type="button" class="btn btn-danger w-100 mt-2 deleteButton" data-id="${task.task_id}">削除</button>
                </div>
            </div>
        </div>
    `;
});

ソートや絞り込み後に再表示のために一度初期化

const list = document.getElementById('taskList');
list.innerHTML = '';

関数全体

function displayTasks(tasks){

    const list = document.getElementById('taskList');
    list.innerHTML = '';

    let htmlContent = '';
    tasks.forEach(function(task){
        htmlContent += `
            <div class="col" id="task-card-${task.task_id}">
                <div class="card mb-3" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">${task.task_name}</h5>
                        <h6 class="card-subtitle mb-2 text-body-secondary">締切: ${task.task_deadline}</h6>
                        <h6 class="card-subtitle mb-2 text-body-secondary">状態: ${task.task_status}</h6>
                        <p class="card-text">${task.task_detail}</p>
                        <button type="button" class="btn btn-warning w-100 mt-2 updateButton" data-id="${task.task_id}">変更</button>
                        <button type="button" class="btn btn-danger w-100 mt-2 deleteButton" data-id="${task.task_id}">削除</button>
                    </div>
                </div>
            </div>
        `;
    });
    list.innerHTML = htmlContent;
}

タスクフォームの表示