使用 JavaScript 合并 HTML 行
Using JavaScript to MergeTwo HTML Rows
我正在为一个经典的 asp WEB 应用程序提供支持，我发现需要构建一个调度板，在 headers 的行和行上显示调度的时间。我所做的是：我确认今天有日程安排。如果存在，我将获取该计划的开始和结束时间，然后，对于它们中的每一个，我调用将写入该行的函数：
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 适用，我现在不知道。
最后，这是一些非常混乱的代码，但是您要在这里尝试做的事情比看起来要复杂得多，恐怕我没有时间好好表现编码答案。
我们在这里所做的实际上是遍历 table 的每一行，并将其与前一行进行检查。如果每行的第一个单元格相等，那么我们将合并它们。
合并它们有点复杂，因为我们需要能够过滤掉那些包含 'PARADA' 的单元格，否则它们将简单地覆盖上一行中没有 'PARADA' 的单元格。
这有点老套，可以做得更好。例如，您可以将其拆分为更小的函数，或者创建包含 '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>
我正在为一个经典的 asp WEB 应用程序提供支持，我发现需要构建一个调度板，在 headers 的行和行上显示调度的时间。我所做的是：我确认今天有日程安排。如果存在，我将获取该计划的开始和结束时间，然后，对于它们中的每一个，我调用将写入该行的函数：
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 适用，我现在不知道。
最后，这是一些非常混乱的代码，但是您要在这里尝试做的事情比看起来要复杂得多，恐怕我没有时间好好表现编码答案。
我们在这里所做的实际上是遍历 table 的每一行，并将其与前一行进行检查。如果每行的第一个单元格相等，那么我们将合并它们。
合并它们有点复杂，因为我们需要能够过滤掉那些包含 'PARADA' 的单元格，否则它们将简单地覆盖上一行中没有 'PARADA' 的单元格。
这有点老套，可以做得更好。例如，您可以将其拆分为更小的函数，或者创建包含 '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>