我想在h1标题中显示表格行的总数。
我有一个这种格式的表:
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
这是我想要显示表行数的标题,对于前面提到的示例表,它将是4(包括标题):
<h1 style="text-align:center;">Headline (X nr of table rows)</h1>
我发现这个javascript和其他几个计算行数,但我不知道如何在标题中显示数字。
<script language="javascript">
var rowCount = document.getElementById('sortabletable').rows.length;
</script>
答案 0 :(得分:0)
试试这个:
HTML
<h1 id="numberOfRows">
</h1>
的JavaScript
var rows = document.getElementsByTagName("tr").length;
document.getElementById("numberOfRows").innerHTML = "Number of rows" + rows;
答案 1 :(得分:0)
document.querySelector('h1').innerHTML = rows;
虽然最好给h1
一个id
并使用:
document.getElementById('THE_ID').innerHTML = rows;`
答案 2 :(得分:0)
首先,您需要一些方法来引用相关的<h1>
元素:
<h1 style="text-align:center;">Headline (X nr of table rows)</h1>
鉴于它是第一个,并且应该只是 ,<h1>
,您可以使用:
document.querySelector('h1');
或者:
document.getElementsByTagName('h1')[0];
导致:
document.querySelector('h1').textContent = 'Headline (' + rowcount+ ' nr of table rows)';
var rowcount = document.getElementById('sortabletable').rows.length;
document.querySelector('h1').textContent = 'Headline (' + rowcount+ ' nr of table rows)';
&#13;
<h1></h1>
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
&#13;
或者:
document.getElementsByTagName('h1')[0].textContent = 'Headline (' + rowcount + ' nr of table rows)';
var rowcount = document.getElementById('sortabletable').rows.length;
document.getElementsByTagName('h1')[0].textContent = 'Headline (' + rowcount+ ' nr of table rows)';
&#13;
<h1></h1>
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
&#13;
或者,只使用CSS:
body {
counter-reset: rowCount;
}
#sortabletable tr {
counter-increment: rowCount;
}
#count::before {
content: ' (' counter(rowCount) ')';
}
body {
counter-reset: rowCount;
}
#sortabletable tr {
counter-increment: rowCount;
}
#count::before {
content: ' (' counter(rowCount) ')';
}
&#13;
<table class="sortable" align="center" id="sortabletable" style="text-align:center;">
<thead>
<tr>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>A</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>B</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
<tr>
<td>
<p>C</p>
<p>
<a href="URL" title="TEXT" target="_blank">
<img src="image URL" width="" height="" alt="Alt Text">
</a>
</p>
</td>
<td>Date</td>
</tr>
</tbody>
</table>
<h1>Headline <span id="count"></span></h1>
&#13;
但遗憾的是,CSS方法只有<h1>
元素出现在<table>
之后才能起作用(在我们将结果应用于显示元素之前允许计数器递增)。
答案 3 :(得分:-1)
以下是代码:
var rows = document.getElementById('sortabletable').getElementsByTagName("tr").length;
document.getElementById('row_count').innerHTML = 'Headline ('+ rows +' nr of table rows)';
<h1 style="text-align:center;" id="row_count">Headline (X nr of table rows)</h1>