#javascript #html #xslt
#javascript #HTML #xslt
Вопрос:
Я получил таблицу с тремя столбцами (имя, дата, секрет) и динамическими строками. Я хотел бы иметь две строки заголовка. Первый и третий столбцы должны использовать первую и вторую строку заголовка как одну строку. Я знаю, что могу сделать это с помощью rowspan = «2». Проблема сейчас в том, что мне нужно, чтобы во второй строке заголовка было четыре столбца. Мне нужно, чтобы второй и третий столбцы во второй строке были такими же большими, как столбец «дата» в моей первой строке. Итак, я хочу разбить свой столбец «дата» на «начало» и «конец». Так что просто иметь время начала и время окончания. Итак, моя первая строка — имя, дата, секрет. Моя вторая строка должна быть Name, begin, end, secret, но такой же большой, как первая строка. Дата должна быть просто разделена на начало и конец.
Смотрите мой код с выпадающим меню и флажком ниже. Я не включил вторую строку заголовка, потому что я не знаю как.
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<html>
<head><title>Shared Secrets</title></head>
<body>
<h1>Shared Secrets</h1>
<table id="myTable">
<colgroup>
<col width="150" style="background-color:red"></col>
<col width="165"></col>
</colgroup>
<tr style ="background-color:grey">
<th>plane
<select id="modelRangeDropdown" onchange="filterReports()">
<option selected="selected">All</option>
<xsl:for-each select="logstore/plane">
<option>
<xsl:value-of select="Name" />
</option>
</xsl:for-each>
</select>
</th>
<th>Datum</th>
<th>Secret
<input type="checkbox" id="identicalSecrets" onchange="identicalSecrets()"></input>
<label for="identicalSecrets">hide identical secrets</label>
</th>
</tr>
<xsl:for-each select="logstore/plane/trigger">
<tr>
<td><xsl:value-of select="../Name"/></td>
<td><xsl:value-of select="date"/></td>
<td><xsl:value-of select="secret"/></td>
</tr>
</xsl:for-each>
</table>
<script type="text/javascript" src="/../../filterReports.js"></script>
<script type="text/javascript" src=/../../identicalSecrets.js"></script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Комментарии:
1. Ответ, по сути, тот же, что и в прошлый раз: используйте максимальное количество столбцов / строк, которое вам нужно в качестве базового, затем используйте
rowspan/colspanдля объединения ячеек. Вот пример из прошлого раза, измененный в соответствии с новым требованием: jsfiddle.net/khrismuc/wg6f0dm2 Смотрите также здесь: html.com/tables/rowspan-colspan2. Это не то, о чем говорится в вашем вопросе, который требует, чтобы столбец даты был разделен на две части. В любом случае, может быть, вам следует набросать структуру, которую вы хотите, и добавить ее в вопрос? редактировать: …. и вы удалили комментарий.
Ответ №1:
Атрибут rowspan HTML
Пример:
Таблица HTML с ячейкой таблицы, занимающей две строки:
<table> <tr> <th>Month</th> <th>Savings</th> <th>Savings for holiday!</th> </tr> <tr> <td>January</td> <td>$100</td> <td rowspan="2">$50</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>Определение и использование Атрибут rowspan определяет количество строк, которые должна занимать ячейка.
Другие примеры
Пример использования rowspan=»0″:
<table> <thead> <tr> <th>Month</th> <th>Savings</th> <th rowspan="3">Savings for holiday!</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> <td rowspan="0">$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>