SQL / JS如何将重复的行重新排列为一个

Question

如何像 User 1 和 User 3 一样将属于 User 2 的所有单元格重新组合成一行？

因此，该脚本不应为同一用户 id 提供多行，而应将它们分组为一行，以便 User 2 相应地显示所有指示的橙色单元格。

表格是从 PHP 代码动态创建的
但是，如果它可以用一个很棒的 SQL 语句来完成，否则 jQuery 或 JS 代码可以在加载后重新组合它也会有所帮助，有什么想法吗？

    <table class="table table-bordered" id="whois-onleave" style="font-size:10px;">
      <thead>
        <tr style="text-align: center;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-size: large"><td>July 2017</td></tr>
        <tr>
          <td>&nbsp;</td>
          <td class=" currentday-bg dayoff"><b>Sat</b></td><td class=" dayoff"><b>Sun</b></td><td><b>Mon</b></td><td><b>Tue</b></td><td><b>Wed</b></td><td><b>Thu</b></td><td><b>Fri</b></td><td class=" dayoff"><b>Sat</b></td><td class=" dayoff"><b>Sun</b></td><td><b>Mon</b></td><td><b>Tue</b></td><td><b>Wed</b></td><td><b>Thu</b></td><td><b>Fri</b></td><td class=" dayoff"><b>Sat</b></td><td class=" dayoff"><b>Sun</b></td><td><b>Mon</b></td><td><b>Tue</b></td><td><b>Wed</b></td><td><b>Thu</b></td><td><b>Fri</b></td><td class=" dayoff"><b>Sat</b></td><td class=" dayoff"><b>Sun</b></td><td><b>Mon</b></td><td><b>Tue</b></td><td><b>Wed</b></td><td><b>Thu</b></td><td><b>Fri</b></td><td class=" dayoff"><b>Sat</b></td><td class=" dayoff"><b>Sun</b></td><td><b>Mon</b></td>    </tr>
</thead>
<tbody>
        <tr>
          <td width="12"><b>Employee</b></td>
          <td class=" currentday-bg dayoff"><b>1</b></td><td class=" dayoff"><b>2</b></td><td><b>3</b></td><td><b>4</b></td><td><b>5</b></td><td><b>6</b></td><td><b>7</b></td><td class=" dayoff"><b>8</b></td><td class=" dayoff"><b>9</b></td><td><b>10</b></td><td><b>11</b></td><td><b>12</b></td><td><b>13</b></td><td><b>14</b></td><td class=" dayoff"><b>15</b></td><td class=" dayoff"><b>16</b></td><td><b>17</b></td><td><b>18</b></td><td><b>19</b></td><td><b>20</b></td><td><b>21</b></td><td class=" dayoff"><b>22</b></td><td class=" dayoff"><b>23</b></td><td><b>24</b></td><td><b>25</b></td><td><b>26</b></td><td><b>27</b></td><td><b>28</b></td><td class=" dayoff"><b>29</b></td><td class=" dayoff"><b>30</b></td><td><b>31</b></td>    </tr>
        <tr>
          <td>User 1</td>
          <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
        <td>User 2</td>
        <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td class=" allrequested"></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
        <td>User 2</td>
        <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td class=" allrequested"></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
        <td>User 2</td>
        <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td class=" allrequested"></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
        <td>User 2</td>
        <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td class=" allrequested"></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
        <td>User 2</td>
        <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td class=" allrequested"></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
        <td>User 2</td>
        <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td class=" allrequested"></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
        <td>User 3</td>
        <td class=" currentday-bg dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" dayoff allaccepted"></td><td class=" dayoff allaccepted"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td class=" allaccepted"></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td><td></td><td></td><td></td><td></td><td class=" dayoff"></td><td class=" dayoff"></td><td></td>    </tr><tr>
      </tbody>
    </table>

Answer 1

就像在您的问题下面的 cmets 中所说...
我认为您应该使用 SQL 查询来合并服务器端的员工信息。

它对包含 3 个“用户”的表没有影响。

但是依靠客户端来执行这样的任务是不好的设计...
表演说话。

让我们考虑一下 500 多名员工，每人都有一对夫妇“离开”和离开。

     这将使您的公司成为某种夏令营！
哈哈！

但是在编码时你也必须考虑性能......
编码就像一门生意。

好吧，哲学够了……
这是将所有员工信息“合并”到一行的 jQuery 代码：
（根据提供的示例表并假设“用户”按顺序出现）

$(document).ready(function(){

  var tableRows = $(".table tr");
  console.log(tableRows.length);

  var previousEmployee = tableRows.find("td").last();
  //console.log(previousEmployee.html());

  // Run throught the rows
  tableRows.each(function(){

    var employee = $(this).find("td").first();
    //console.log(employee.html());

    // If we have a second row for the same employee.
    if( employee.html() == previousEmployee.html() ){
      console.log(employee.html());

      // Move the classes to the above row.
      var thisrowTDcollection = employee.parent("tr").find("td");
      for(j=0;j<thisrowTDcollection.length;j++){
        var classtoMove = thisrowTDcollection.eq(j).attr("class");
        employee.parent("tr").prev().find("td").eq(j).addClass(classtoMove);
      }

      // Now remove this row.
      $(this).remove();

    }
    previousEmployee = employee;
  });
});

CodePen