如何用原生JS实现添加名称时div随内容自适应宽高

核心修改点 #

• 移除分组div的固定宽高，让元素自动适配内容
• 调整父容器布局，取消固定高度，支持随子元素扩展
• 修复分组数量计算逻辑错误
• 修复随机选人时的重复/越界问题

1. 修复createGroups()函数逻辑与样式

原函数中错误设置了固定宽高，且分组数计算、随机选人均存在问题，修改后如下：

function createGroups() {
    maxPeopleInGroup = parseInt(groupOptions.value);
    // 正确计算分组数：总人数除以每组最大人数，向上取整
    maxNumberGroups = Math.ceil(peopleArray.length / maxPeopleInGroup);
    // 复制原数组避免修改原始数据
    let peopleCopy = [...peopleArray];

    for (let i = 0; i < maxNumberGroups; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", `group${groupNumber}`);
        // 移除固定宽高，用内边距、最小/最大宽度控制自适应
        div.style.textAlign = "center";
        div.style.display = "flex";
        div.style.flexDirection = "column";
        div.style.justifyContent = "center";
        div.style.fontFamily = "Georgia, 'Times New Roman', Times, serif";
        div.style.fontSize = "18pt";
        div.style.fontWeight = "400";
        div.style.border = "1px solid black";
        div.style.padding = "1rem";
        div.style.margin = "0.5rem";
        div.style.minWidth = "150px";
        div.style.maxWidth = "300px";
        outputMainDiv.appendChild(div);
        groupNumber++;

        // 给当前分组填充人员，直到满员或无剩余人员
        let currentGroupSize = 0;
        while (currentGroupSize < maxPeopleInGroup && peopleCopy.length > 0) {
            let index = Math.floor(Math.random() * peopleCopy.length);
            let person = peopleCopy.splice(index, 1)[0];
            div.innerHTML += `${person.firstName} ${person.lastName}<br>`;
            currentGroupSize++;
        }
    }
}

2. 修改父容器CSS样式

原父容器固定高度导致内容溢出，改为flex布局并取消固定高度：

#output-main-div {
    width: 95vw;
    min-height: 95vh;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
}

3. 重置分组状态（避免重复生成）

在submit()函数中添加重置逻辑，防止多次点击后分组id重复：

function submit() {
    if (groupOptions.value != "") {
        inputArticle.classList.add("hidden");
        outputArticle.classList.remove("hidden");
        // 重置分组编号并清空之前的分组
        groupNumber = 1;
        outputMainDiv.innerHTML = "";
        createGroups();
    }
}

完整修改后代码 #

JavaScript

const inputArticle = document.querySelector('#input-article');
const inputForm = document.querySelector('#input-form');
const table = document.querySelector('#table');
const groupOptions = document.querySelector('select[ name="group-options" ]');
const createTeamsButton = document.querySelector('#create-teams-button');
const outputArticle = document.querySelector('#output-article');
const outputMainDiv = document.querySelector('#output-main-div');

let peopleArray = [];
let numberPeople = 0;
let rowNumber = 0;
let groupNumber = 1;
let maxPeopleInGroup = 0;
let maxNumberGroups = 0;

function addRow(person) {
    let row = table.tBodies[0].insertRow(-1);
    let cell1 = row.insertCell(0);
    let cell2 = row.insertCell(1);
    let cell3 = row.insertCell(2);
    let removeButton = document.createElement("button");
    
    // 正确设置data属性
    removeButton.dataset.firstName = person.firstName;
    removeButton.dataset.lastName = person.lastName;
    removeButton.innerText = `Remove ${person.firstName} ${person.lastName}`;
    removeButton.setAttribute("type", "button");

    removeButton.addEventListener('click', (event) => {
        peopleArray = peopleArray.filter(p => p.firstName !== event.target.dataset.firstName || p.lastName !== event.target.dataset.lastName);
        row.remove();
        numberPeople = peopleArray.length;
    })

    cell1.innerText = person.firstName;
    cell2.innerText = person.lastName;
    cell3.appendChild(removeButton);
}

function createNames(event) {
    let person = {
        firstName:  document.getElementById(`firstName`).value,
        lastName: document.getElementById(`lastName`).value
    }

    event.target.reset();
    addRow(person);
    peopleArray.push(person);
    numberPeople = peopleArray.length;
}

function submit() {
    if (groupOptions.value != "") {
        inputArticle.classList.add("hidden");
        outputArticle.classList.remove("hidden");
        groupNumber = 1;
        outputMainDiv.innerHTML = "";
        createGroups();
    }
}

function createGroups() {
    maxPeopleInGroup = parseInt(groupOptions.value);
    maxNumberGroups = Math.ceil(peopleArray.length / maxPeopleInGroup);
    let peopleCopy = [...peopleArray];

    for (let i = 0; i < maxNumberGroups; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", `group${groupNumber}`);
        div.style.textAlign = "center";
        div.style.display = "flex";
        div.style.flexDirection = "column";
        div.style.justifyContent = "center";
        div.style.fontFamily = "Georgia, 'Times New Roman', Times, serif";
        div.style.fontSize = "18pt";
        div.style.fontWeight = "400";
        div.style.border = "1px solid black";
        div.style.padding = "1rem";
        div.style.margin = "0.5rem";
        div.style.minWidth = "150px";
        div.style.maxWidth = "300px";
        outputMainDiv.appendChild(div);
        groupNumber++;

        let currentGroupSize = 0;
        while (currentGroupSize < maxPeopleInGroup && peopleCopy.length > 0) {
            let index = Math.floor(Math.random() * peopleCopy.length);
            let person = peopleCopy.splice(index, 1)[0];
            div.innerHTML += `${person.firstName} ${person.lastName}<br>`;
            currentGroupSize++;
        }
    }
}     

inputArticle.classList.remove("hidden");
outputArticle.classList.add("hidden");

window.addEventListener('keydown', (event) => {
    const firstName = document.getElementById('firstName');
    const lastName = document.getElementById('lastName');
    if (event.key == 'Enter') {
        if (firstName.value && lastName.value) {
            createNames(event);
        }    
    }
}, false)

inputForm.addEventListener("submit", (event) => {
   event.preventDefault();
   createNames(event);
})

createTeamsButton.addEventListener('click', submit);

CSS

#input-article.hidden {
    display: none;
}

table {
    text-align: center;
    align-items: center;
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    width: 50vmin;
    height: 10vmin;
    font-size: 20pt;
    font-weight: 800;
}

input {
    width: 50vmin;
    height: 5vmin;
    text-align: center;
    font-size: 18pt;
    font-weight: 400;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border: 0;
    padding: 0;
}

#group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

#output-article.hidden {
    display: none;
}

#output-main-div {
    width: 95vw;
    min-height: 95vh;
    border: 1px solid black;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Group Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <article id="input-article">
        <form method="dialog" id="input-form">
            <table id="table" border="1">
                <thead>
                    <tr>
                        <th>First Name:</th>
                        <th>Last Name:</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                
                <tbody></tbody>

                <tfoot>
                    <tr>
                        <td><input name="first-name" type="text" required placeholder="First Name" id="firstName"></td>
                        <td><input name="last-name" type="text" required placeholder="Last Name" id="lastName"></td>
                        <td>
                            <button type="submit">Add Person</button>
                            <button type="reset">Clear Names</button>
                        </td>
                    </tr>
                </tfoot>
            </table> 
        </form><br>

        <div id="group">
            <p>Number of people per group:&nbsp;</p>
            <select name = "group-options" required>
                <option value="">--Select Answer--</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
        </div>    

        <div id="buttons">
            <button id="create-teams-button">Randomize Teams</button>
        </div>
    </article>

    <article id="output-article">
        <div id="output-main-div"></div>
    </article>

    <script src="app.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者That New Coder