webクライアント側のテーブル

+---------+-----------+--------------+--------+
| タスクID | タスク名 | 期日 | ステータス |
+---------+-----------+--------------+--------+
| 1 | タスク1 | Sun Sep 01 2024 | 未完了 |
| 2 | タスク2 | Mon Sep 02 2024 | 完了 |
| 3 | タスク3 | Tue Sep 03 2024 | 未完了 |
+---------+-----------+--------------+--------+

Task Manager

作業リストとスケジュール管理

タスクID	タスク名	期日	ステータス

<script src="script.js"></script>

//script.js source//
class Task {
constructor(taskID, taskName, dueDate, status) {
this.taskID = taskID;
this.taskName = taskName;
this.dueDate = new Date(dueDate);
this.status = status;
}

updateStatus(newStatus) {
    this.status = newStatus;
}

}

class TaskManager {
constructor() {
this.tasks = [];
}

loadTasks(taskData) {
    taskData.forEach(task => {
        const newTask = new Task(task.TaskID, task.TaskName, task.DueDate, task.Status);
        this.tasks.push(newTask);
    });
    this.renderTasks();
}

renderTasks() {
    const tableBody = document.getElementById('taskTable').getElementsByTagName('tbody')[0];
    tableBody.innerHTML = ''; // テーブルを初期化

    this.tasks.forEach(task => {
        let row = tableBody.insertRow();
        row.insertCell(0).innerText = task.taskID;
        row.insertCell(1).innerText = task.taskName;
        row.insertCell(2).innerText = task.dueDate.toDateString();
        row.insertCell(3).innerText = task.status;
    });
}

updateTaskStatus(taskID, newStatus) {
    const task = this.tasks.find(t => t.taskID === taskID);
    if (task) {
        task.updateStatus(newStatus);
        this.renderTasks(); // ステータス更新後、再レンダリング
    } else {
        console.log(`Task ${taskID} not found`);
    }
}

}

// エクセルデータのシミュレーション
const excelData = [
{ TaskID: 1, TaskName: "タスク1", DueDate: "2024-09-01", Status: "未完了" },
{ TaskID: 2, TaskName: "タスク2", DueDate: "2024-09-02", Status: "完了" },
{ TaskID: 3, TaskName: "タスク3", DueDate: "2024-09-03", Status: "未完了" }
];

const taskManager = new TaskManager();
taskManager.loadTasks(excelData);

//script.js source//