使用JavaScript合并两个HTML行 [英] Using JavaScript to MergeTwo HTML Rows
问题描述
我正在支持经典的asp WEB应用程序，我遇到了建立一个调度板的需要，该调度板在页眉，行和行上显示调度时间.我要做的是:我确认今天有时间表.如果有的话，我将获得该时间表的开始和结束时间，然后，对于每个时间表，我都将调用将编写以下代码的函数:
I'm giving support to a classic asp WEB application, and I came across the need of building a scheduling board that shows, at the headers, the lines and at the rows the time of the scheduling. What I do is: I verify it there is something schedule for today. If there is, I get the starting and ending time of that schedule, and then, for each of them, I call the function that will write the line:
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>.所以整个算法是:
That function, populate_time, will then get the information I need from the database, see the differente between the ending and starting time and write one <td> for each hour I have in between and the last time precisely. So the whole algorythm is:
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适用，我现在不知道.
Because I want to have precisely the amount of time and the finishing hour, I decided to treat them individually, which for me is just fine, but now I have to merge the rows where the time is the same. I am already using W3 School JavaScript to sort the rows increasing the time. Can anyone help with JavaScript merging these rows? I don't now if rowspan applies.
推荐答案
最后，这是一些非常混乱的代码，但是您要在此处执行的操作比看起来要复杂得多，我恐怕我没有时间给出编码正确的答案.
This is some very messy code, in the end, but what you're trying to do here is quite a bit more complicated than it seems, and I'm afraid I don't have time to give a well coded answer.
我们在这里实际上要做的是遍历表的每一行，并对照上一行对其进行检查.如果每行的前几个单元格相等，那么我们将它们合并.
What we're essentially doing here is going through each row of the table, and checking it against the previous row. If the first cells of each row are equal, then we'll merge them.
合并它们有点复杂，因为我们需要能够过滤出包含"PARADA"的单元格，否则它们将简单地覆盖上一行中没有"PARADA"的单元格.
Merging them is slightly complicated, as we need to be able to filter out those cells which contain 'PARADA', else they'll simply overwrite the cells without 'PARADA' from the previous row.
这一切都有些古怪，可以做得更好.例如，您可以将其拆分为较小的函数，或者适当地创建包含"PARADA"的新单元格对象，而不仅仅是具有textContent属性的假元素.
This is all slightly hacky, and could be done better. You could, for instance, split this out into smaller functions, or create the new cell objects containing 'PARADA' properly, rather than just a fake element with only the textContent property.
话虽如此，我相信这对您有用:
That being said, I believe this will work for you:
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>
这篇关于使用JavaScript合并两个HTML行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
