html - 关于网格中 "grouping"相似数据的提示

Question

你好，我正在制定一个时间表(你可以在链接中看到。)我希望将来有更多的功能(很明显。)但是正如你所看到的，我必须创建很多“重复”(我其实没意见。)但这就是问题所在，我不能说“对这一行中的所有单元格执行此操作”，即使例如，我希望所有 mon-jobs 都有一个“容器“我可以采取行动并使他们所有人都改变。你能帮我解决这个问题吗？

我知道将来会用到“快速创建工具”之类的东西。如果这有意义的话，我更想寻找一种“作为一个整体对相似的数据单元进行操作，而不损害它们的个性”的方法。

我曾尝试创建一个容器，但将其包装在一个“容纳它”的分区中，但它总是会导致我的网格出现一些错误。请帮助我!!!

https://jsfiddle.net/49p0rs2d/

#installer-1 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;

    }



#installer-2 {
        grid-column: 1 / 2;

    }

#installer-3 {
        grid-column: 1 / 2;

    }

#installer-4 {
        grid-column: 1 / 2;

    }

#installer-5 {
        grid-column: 1 / 2;

    }

#installer-6 {
        grid-column: 1 / 2;

    }

#installer-7 {
        grid-column: 1 / 2;
        }

我希望它看起来像现在这样。但我希望能够对“id 组”采取行动，例如 - 所有星期四的工作或 = Marks 的所有工作。

Answer 1

你有没有使用 <table> 的原因？ ？似乎这可以通过表格非常简单地实现。就以您完成的格式进行操作而言，尽管我强烈建议您使用表格，但它会大大减轻您的头痛，请考虑通过执行以下操作来包装每个工作日的工作:

<div id="mondays">
    <div id="mon-job-1"> job-1 </div>

    <div id="mon-job-2"> job-2 </div>

    <div id="mon-job-3"> job-3 </div>

    <div id="mon-job-4"> job-4 </div>

    <div id="mon-job-5"> job-5 </div>

    <div id="mon-job-6"> job-6 </div>

    <div id="mon-job-7"> job-7 </div>       
</div>

然后，在 JavaScript 中，如果你想修改 Mark 的周一工作，你会做类似的事情

const mondays = document.getElementById("mondays");
let markMondayJob = mondays.childNodes[1]

这使您可以保留当前的结构，并且每个元素都具有“个性”。但是，我怎么强调这在表格中会容易得多。您可以使用 <th>，而不是像您的代码笔那样使用临时标题。和 <tr>分别为标题和行添加标签，请考虑这样做，这会为您节省大量时间，因为您希望将来拥有更多功能!