javascript - 使用 JavaScript 合并两个 HTML 行

Question

我正在为一个经典的 asp WEB 应用程序提供支持，我遇到了构建一个调度板的需求，该板在标题、行和行上显示调度时间。我所做的是:我确认今天有日程安排。如果存在，我将获取该计划的开始和结束时间，然后，对于它们中的每一个，我调用将写入该行的函数:

DIM todayDate: todayDate = year(now()) & "-" & month(now()) &  "-" & day(now())
                        sql = "SELECT schedule_startingHour, schedule_endingHour, line_id FROM tbl_schedule WHERE Convert(date, schedule_startingHour) = '" & todayDate & "';"
                        SET recordSet = conn.execute(sql)
                        DIM starting_hours(18)
                        DIM ending_hours(18)

                        WHILE NOT recordSet.EOF
                            IF recordSet("line_id") <> 0 THEN
                                starting_hours(recordSet("line_id")) = recordSet("schedule_startingHour")
                                ending_hours(recordSet("line_id")) = recordSet("schedule_endingHour")
                            END IF
                            CALL populate_time(starting_hours(recordSet("line_id")), ending_hours(recordSet("line_id")))
                            recordSet.MOVENEXT
                        WEND

那个函数，populate_time,然后将从数据库中获取我需要的信息，查看结束时间和开始时间之间的差异并写一个 <td>对于我在中间和最后一次之间的每个小时。所以整个算法是:

FUNCTION populate_time(startingHour, endingHour)

    sql = "SELECT schedule_id, family_mdt, line_id FROM tbl_schedule AS schedule INNER JOIN tbl_family AS family ON schedule.family_id = family.family_id WHERE schedule_startingHour  = '"&startingHour&"' AND schedule_endingHour = '"&endingHour&"';"
    SET rs = conn.execute(sql)
    DIM scheduled_time(18)
    DIM hoursAmount(18)

    WHILE NOT rs.EOF
        scheduled_time(rs("line_id")) = rs("family_mdt")
        difference = "SELECT DATEDIFF(hour, '"&starting_hours(recordSet("line_id"))&"', '"&ending_hours(recordSet("line_id"))&"') AS difference;"
        SET rs_diff = conn.execute(difference)
        hoursAmount(rs("line_id")) = (rs_diff("difference")+1)
        IF hoursAmount(rs("line_id")) <= 1 THEN
            hoursAmount(rs("line_id")) = 2
        END IF
        timeEmpty = timeEmpty+1
        rs.MOVENEXT
    WEND

    IF timeEmpty = 0 THEN
        'That specific time has nothing scheduled in none of the gold lines.
        ELSE

            'Styling the hours to be shown
            quebra = Chr(32)
            ate = InStr(startingHour, quebra)
            startingHour = Right(startingHour, (ate+1))
            startingHour = Left(startingHour, 2)
            startingHour = Replace(startingHour, ":", ".")
            startingHour = Replace(startingHour, quebra, "")

            IF LEN(startingHour) = 1 THEN
                startingHour = "0"&startingHour&".00"
                ELSE 
                    IF LEN(startingHour) = 2 THEN
                        startingHour = startingHour&".00"
                    END IF
            END IF

            ate = InStr(endingHour, quebra)
            endingHour = Right(endingHour, (ate+1))
            endingHour = Left(endingHour, 5)
            endingHour = Replace(endingHour, ":", ".")
            endingHour = Replace(endingHour, quebra, "")



            'Creates the line of the current time
            FOR r = 1 TO 18 
                FOR i = 1 TO hoursAmount(r) 
                    response.write("<tr class='item'>")
                    IF i=1 THEN
                        response.write("<td>"&startingHour&"</td>")
                        CALL write_time(Array(scheduled_time(1), scheduled_time(2), scheduled_time(3), scheduled_time(4), scheduled_time(5), scheduled_time(6), scheduled_time(7), scheduled_time(8), scheduled_time(9), scheduled_time(10), scheduled_time(11), scheduled_time(12), scheduled_time(13), scheduled_time(14),scheduled_time(15), scheduled_time(16), scheduled_time(17),scheduled_time(18)))
                        ELSE
                            IF i = hoursAmount(r) THEN
                                response.write("<td>"&endingHour&"</td>")
                                CALL write_time(Array(scheduled_time(1), scheduled_time(2), scheduled_time(3), scheduled_time(4), scheduled_time(5), scheduled_time(6), scheduled_time(7), scheduled_time(8), scheduled_time(9), scheduled_time(10), scheduled_time(11), scheduled_time(12), scheduled_time(13), scheduled_time(14),scheduled_time(15), scheduled_time(16), scheduled_time(17),scheduled_time(18)))
                                ELSE
                                    hours = startingHour+(i-1)
                                        IF LEN(hours) = 1 THEN
                                            hours = "0"&hours&".00"
                                            ELSE 
                                        IF LEN(hours) = 2 THEN
                                            hours = hours&".00"
                                            END IF
                                        END IF
                                    response.write("<td>"&hours&"</td>")
                                    CALL write_time(Array(scheduled_time(1), scheduled_time(2), scheduled_time(3), scheduled_time(4), scheduled_time(5), scheduled_time(6), scheduled_time(7), scheduled_time(8), scheduled_time(9), scheduled_time(10), scheduled_time(11), scheduled_time(12), scheduled_time(13), scheduled_time(14),scheduled_time(15), scheduled_time(16), scheduled_time(17),scheduled_time(18)))
                            END IF
                    END IF
                    response.write("</tr>")
                NEXT
            NEXT

    END IF       
END FUNCTION    

'Write_Time will write the content for each line for that especific time
FUNCTION write_time(line)
    DIM x
    FOR EACH x IN line
        IF x <> "" THEN
            response.write("<td><a class="&"line-schedule"&" href="&"/asplearning/act/schedule-line.asp"&">"& x &"</a></td>")
        ELSE
            response.write("<td class="&"line-schedule-stopped"&" href="&"/asplearning/act/schedule-line.asp"&">PARADA</td>")
        END IF
    NEXT
END FUNCTION

最后我得到了这个结果:

因为我想要精确的时间量和完成时间，所以我决定单独处理它们，这对我来说很好，但现在我必须合并时间相同的行。我已经在使用 W3 School JavaScript 对增加时间的行进行排序。任何人都可以帮助 JavaScript 合并这些行吗？我现在不知道 rowspan适用。

Answer 1

最后，这是一些非常困惑的代码，但是你在这里尝试做的事情比看起来要复杂得多，恐怕我没有时间给出一个编码良好的答案.

我们在这里所做的实质上是遍历表格的每一行，并将其与前一行进行核对。如果每行的第一个单元格相等，那么我们将合并它们。

合并它们有​​点复杂，因为我们需要能够过滤掉那些包含“PARADA”的单元格，否则它们将简单地覆盖上一行中没有“PARADA”的单元格。

这一切都有些 hacky，可以做得更好。例如，您可以将其拆分为更小的函数，或者正确创建包含“PARADA”的新单元格对象，而不仅仅是一个只有 textContent 属性的假元素。

话虽这么说，我相信这对你有用:

const getMergedRow = (rowOne, rowTwo) => {
  const noParadaOne = _.mapValues(rowOne.cells, x =>
    x.innerHTML.indexOf('PARADA') === -1 ? x : null)
    
  const noParadaTwo = _.mapValues(rowTwo.cells, x =>
    x.innerHTML.indexOf('PARADA') === -1 ? x : null)
  
  return _.mapValues(noParadaOne, (x, i) => {
    return x ? x : (noParadaTwo[i] ? noParadaTwo[i] : {textContent: 'PARADA'})
  })
};

const mergeRows = tableElement => {
  const rows = tableElement.rows;
  
  let previousLabel = undefined;
  let previousRow = undefined;
  
  for (let i = 0; i < rows.length; i++) {
      const x = rows[i];
      const rowLabel = x.cells[0].innerHTML;
      
      if (rowLabel === previousLabel) {
        const newRow = getMergedRow(x, previousRow);
        
        tableElement.deleteRow(i);
        tableElement.deleteRow(i-1);
        
        const insertedRow = tableElement.insertRow(i-1);
        
        Object.values(newRow)
          .forEach((cell, i) => {
            const newCell = insertedRow.insertCell();
            const newText = document.createTextNode(cell.textContent)
            newCell.append(newText)
          })
          
        i--;
      }
      
      
      
      previousLabel = rowLabel;
      previousRow = x;
  }

}

mergeRows(document.getElementById('t'))

body {
  font-family: arial;
}

td {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

<table id='t'>
  <tr>
    <td></td>
    <td>GL1</td>
    <td>GL1</td>
    <td>GL3</td>
  </tr>
  <tr>
    <td>08.00</td>
    <td>PARADA</td>
    <td>PARADA</td>
    <td><a href="#">PARADA</a></td>
  </tr>
  <tr>
    <td>09.00</td>
    <td><a href="#">VEGAS14INTEL</a></td>
    <td>PARADA</td>
    <td>PARADA</td>
  </tr>

  <tr>
    <td>09.00</td>
    <td>PARADA</td>
    <td>LOCIL14</td>
    <td>PARADA</td>
  </tr>
  <tr>
    <td>10.00</td>
    <td>PARADA</td>
    <td>PARADA</td>
    <td>PARADA</td>
  </tr>
  <tr>
    <td>10.00</td>
    <td>PARADA</td>
    <td>Test</td>
    <td>PARADA</td>
  </tr>
  <tr>
    <td>10.00</td>
    <td>Another test</td>
    <td>Test</td>
    <td>PARADA</td>
  </tr>
  <tr>
    <td>11.00</td>
    <td>x</td>
    <td>y</td>
    <td>z</td>
  </tr>
</table>