在网格中对相似数据进行“分组”的技巧

Question

嗨，我正在制定一个时间表(你可以在链接中看到)。我希望在未来会有更多的功能(显然)。但正如你所看到的，我不得不创建许多“重复”(实际上我对此没有意见)。但问题是，我不能说“对这一行中的所有单元格执行此操作”，即使例如，我希望所有单作业都有一个“容器”，我可以对其执行操作并使它们全部更改。你能帮帮我吗？

我知道有一些“快速创建工具”会在将来使用它们。我更多的是在寻找一种方法，“作为一个群体，对相似的数据单元采取行动，而不损害它们的个性”，如果这是有意义的话。

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

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;
        }

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

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中，如果你想修改比方说马克星期一的工作，你可以这样做

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

这可以让你保留你当前的结构，也可以让每个元素都有“个性”。然而，我再怎么强调也不为过，在一个表中这将是多么容易。你可以分别使用<th>和<tr>标签来标记标题和行，而不是像你的程序员那样使用临时标题，请考虑这样做，这样会节省你很多时间，因为你想在将来有更多的特性！