Question

说我有下表。如何使用段落<p id="rowscount"></p>中的简单javascript显示表格中的行数。

我是javascript的新手，所以如果您可以包含有关如何调用函数的任何注释，将会很有帮助。

<p id="rowscount"></p>


<table>

  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>

</table>

Answer 1

假设您拥有以下表格：

<div id="rowsNumber"></div>
<table id="myTable">

  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>

</table>

在某些浏览器中，表数据行包含在tbody标记内，如下所示：

<div id="rowsNumber"></div>
<table id="myTable">
    <tbody>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
    <tbody>
    </table>

所以定义一个这样的函数：

var getTableRowCount = function(tableNode){
  var tbody = tableNode.getElementsByTagName('tbody')[0];
  if(tbody){
   return tbody.getElementsByTagName('tr').length;
  }else{
   return tableNode.getElementsByTagName('tr').length;
  }

}

并调用传递表节点的函数作为参数，例如：

var count = getTableRowCount(document.getElementById('myTable'));
document.getElementById('rowsNumber').innerHTML = 'Total rows = ' + count;

现在，如果你想观察一个监听器，那么每当表的任何tr改变其可见性时，你需要在tr行上进行MutationObserver观察。要添加变异观察器，您可以编写如下代码：

var observer = new MutationObserver(function(mutations) {
     var count = getTableRowCount(document.getElementById('myTable'));
     document.getElementById('rowsNumber').innerHTML = 'Total rows = '   + count;
  });

//find the target on which to observe
var target = document.querySelector('table tr');

observer.observe(target, {
    attributes: true
});

Answer 2

请尝试以下代码

newshape

var table = document.getElementById('myTable');
document.getElementById("rowscount").innerHTML = table.childNodes.length;

如何使用javascript计算“平面”表中的行数

2 个答案: