显示h1标题中表格的表格行数

时间:2015-05-30 14:23:35

标签: javascript html

我想在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>

4 个答案:

答案 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)';

&#13;
&#13;
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;
&#13;
&#13;

或者:

document.getElementsByTagName('h1')[0].textContent = 'Headline (' + rowcount + ' nr of table rows)';

&#13;
&#13;
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;
&#13;
&#13;

或者,只使用CSS:

body {
  counter-reset: rowCount;
}
#sortabletable tr {
  counter-increment: rowCount;
}
#count::before {
  content: ' (' counter(rowCount) ')';
}

&#13;
&#13;
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;
&#13;
&#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>