javascript - 使用 JavaScript 合并两个 HTML 行
问题描述
我正在为一个经典的 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适用。
解决方案
最后，这是一些非常混乱的代码，但是您在这里尝试做的事情比看起来要复杂得多，恐怕我没有时间给出一个编码良好的答案。
我们在这里所做的基本上是遍历表格的每一行，并与前一行进行检查。如果每行的第一个单元格相等，那么我们将合并它们。
合并它们有点复杂，因为我们需要能够过滤掉那些包含“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>推荐阅读
- java - 如何在不声明另一个 Scanner 对象的情况下在已扫描的字符串上使用分隔符？
- c# - 如何在 C# 中将字符串中的单词大写？
- excel - Azure 函数读取 excel (xlsx) 文件
- python - 导入 IPwhois 模块的问题
- docker - 如何使用 compose 为 docker 图像动态设置 TAG？
- python - 是否可以将函数返回值作为表单值从 html 传递给视图？
- jquery - 如何让我的 Jquery 鼠标向上功能工作
- android - 类型 androidx.appcompat.resources.R$dimen 被定义了多次
- javascript - I need to add multiple checked radio values into a single variable
- sql - 如何从具有相同值的两个不同列中选择一行