チーム分けWebツール～グループ分けや組み分けをランダム生成！

function splitTeams() {
    const namesText = document.getElementById("names").value.trim();
    const teamCount = parseInt(document.getElementById("teamCount").value, 10);
    if (!namesText) {
        return;
    }
    const names = namesText.split('\n').map(name => name.trim()).filter(name => name !== '');
    updateNameCount();
    const teams = [];
    for (let i = 0; i < teamCount; i++) {
        teams[i] = [];
    }
    while (names.length > 0) {
        for (let i = 0; i < teamCount; i++) {
            if (names.length === 0) break;
            const randomIndex = Math.floor(Math.random() * names.length);
            teams[i].push(names[randomIndex]);
            names.splice(randomIndex, 1);
        }
    }
    displayResult(teams);
}

function updateNameCount() {
    const namesText = document.getElementById("names").value.trim();
    const names = namesText.split('\n').map(name => name.trim()).filter(name => name !== '');
    document.getElementById("nameCount").innerHTML = `<span style="color: red;">${names.length}名</span>入力中`;
}

function displayResult(teams) {
    const tableContainer = document.getElementById("tableContainer");
    tableContainer.innerHTML = '';
    const table = document.createElement("table");
    const thead = document.createElement("thead");
    const trHead = document.createElement("tr");
    for (let i = 0; i < teams.length; i++) {
        const th = document.createElement("th");
        th.innerText = `チーム ${i + 1}`;
        th.addEventListener('click', highlightColumn);
        trHead.appendChild(th);
    }
    thead.appendChild(trHead);
    table.appendChild(thead);
    const maxTeamSize = Math.max(...teams.map(team => team.length));
    for (let i = 0; i < maxTeamSize; i++) {
        const tr = document.createElement("tr");
        for (let j = 0; j < teams.length; j++) {
            const td = document.createElement("td");
            td.innerText = teams[j][i] || "";
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }

    tableContainer.appendChild(table);

}
function highlightColumn(event) {
    const th = event.target;
    const index = Array.from(th.parentNode.children).indexOf(th);
    const table = th.closest('table');
    const rows = table.querySelectorAll('tr');
    table.querySelectorAll('.highlighted').forEach(cell => cell.classList.remove('highlighted'));
    rows.forEach(row => {
        const cell = row.children[index];
        if (cell) cell.classList.add('highlighted');
    });
}