Javascript：计算每个表的表行数，并将值返回给相应的元素

Question

我在网页上有三个表格。每个表都有一个嵌套在#ifndef queue_h #define queue_h #include "stdheader.h" //Structures //element is content of a node. typedef int element; //_DLLnode is 1 link in a doubly linked list. struct _DLLNode { element e; struct _DLLNode *next; struct _DLLNode *prev; }; typedef struct _DLLNode DLLNode; typedef struct _DLLNode *DN_ptr; //DLL is a series of links tracked by the head and back of the list. struct _DLL { DN_ptr front; DN_ptr back; }; typedef struct _DLL Queue; typedef struct _DLL *Queue_ptr; Queue_ptr createQueue(); void enqueue(Queue_ptr, element); element dequeue(Queue_ptr); int isEmpty(Queue_ptr); element peek(Queue_ptr); void display(Queue_ptr); void destroyQueue(Queue_ptr); #endif /* queue_h */ 标签中的对应元素，我需要反映其各自表中的行数，减去头行和底行（-2）。当我使用单个表时，此代码可以正常工作：

HTML表格摘要：

<thead>

使用Javascript：

<table class="table" id="category">
      <thead>
          <tr>
              <th><i class="fa fa-hashtag"></i> headache - <label class="label label-primary" id="tableBadge">0</span></th>
              <th><i class="fa fa-calendar"></i> Date Added</th>
              <th><i class="fa fa-cog"></i> Options</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>Test entry</td>
              <td>1/19/2016</td>
              <td>
              <a href="#" class="btn btn-success btn-xs"><i class="fa fa-pencil"></i></a>
              <a href="#" class="btn btn-primary btn-xs"><i class="fa fa-calendar"></i></a>
              <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></a>
              </td>
          </tr>
          <tr>
              <td><a href="#" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> add entry</a></td>
              </td>
          </tr>
      </tbody>
  </table>

但是，尊重该ID中HTML的规律是一个元素所独有的，我留在了一个绑定中。使用function catCount() { var rows = document.getElementById("category").rows.length; document.getElementById("tableBadge").innerHTML = rows - 2 + " entries"; } 或getElementsByClassName()值会返回0，告诉我它不起作用。至少使用相同的语法。

我搜索过谷歌等人。对于一个解决方案，但它们似乎是针对行的总量而定制的，而不是各自对其表的个别计数。

任何帮助将不胜感激。提前谢谢。

Answer 1

将id tableBadge更改为tableBadge_category，类似于othter表。

' table_id '是表格的id，你的跨度是tableBadge_ table_id

div.time:hover > div {
  position: absolute;
  cursor: pointer;
  display: block;
  width: 100%;
  top:100%;
  left:0;
  background-color: white;
  outline:1px solid limegreen;
}

Answer 2

请尝试使用querySelectorAll，例如：

document.querySelectorAll('.table>thead>tr')

数组的长度可能是您正在寻找的答案

Answer 3

getElementsByTagName和getElementsByClassNAme返回节点列表，需要迭代它们。

window.addEventListener('load', function(e) {
    //This is a node list you must iterate
    var tables = document.getElementsByTagName('table');

    for (var i = 0; i < tables.length; i++) {
        //This loop will handle each tble selected
        var table = tables[i];
        var totalRows = table.rows.length;
        console.log(totalRows);
        //Add your code here
    }
}, false);

Answer 4

虽然您已经接受了答案，但我建议以下内容可能会稍微有用，而且对依赖硬编码豁免的依赖性要小得多（因此对未来的维护噩梦也少一些）。

也就是说，我的解决方案是将“页脚”放在<tfoot>元素中，以便相关的<tr>元素都包含在<tbody>元素中。 <table>。

我推荐的JavaScript函数：

// wrapping the function in an Immediately-Invoked Function Expression
// ("IIFE") in order that it runs immediately and does not require
// calling later:
(function() {

  // using 'let' (rather than var) to declare local variables, all
  // of which are available only within the block in which they're
  // declared; here we convert the NodeList returned by
  // document.querySelectorAll('span.label') into an Array, using
  // Array.from():
  let outputs = Array.from(document.querySelectorAll('span.label')),

  // declaring another variable for later use:
    tbodies;

  // iterating over each of the found 'span.label' elements
  // in the Array, using Array.prototype.forEach():
  outputs.forEach(function(span) {
    // the first argument (here 'span') is the current
    // array-element of the array over which we're iterating.

    // finding the closest ancestor <table> element from the
    // current span node, and then finding all the <tbody>
    // elements contained within that <table>, and converting
    // that NodeList to an Array, again using Array.from() to
    // do so:
    tbodies = Array.from(span.closest('table').querySelectorAll('tbody'));

    // updating the text-content of the span to:
    // the sum of the child <tr> elements found in each of
    // the <tbody> elements found within the <table>, using
    // Array.prototype.reduce() to reduce the Array to a single
    // (here numeric) value; here we use an Arrow Function
    // to add the number of children of the <tbody> element
    // to the initialValue of the reduce method (0, the
    // final argument following the comma):
    span.textContent = tbodies.reduce((initialValue, tbody) => a + tbody.children.length, 0);
  });

// here the function is invoked:
})();

(function() {
  let outputs = Array.from(document.querySelectorAll('span.label')),
    tbodies;

  outputs.forEach(function(span) {
    tbodies = Array.from(span.closest('table').querySelectorAll('tbody'));

    span.textContent = tbodies.reduce((initialValue, tbody) => initialValue + tbody.children.length, 0);
  });

})();

<table class="table category">
  <thead>
    <tr>
      <th><i class="fa fa-hashtag"></i> headache - <span class="label label-primary"></span>
      </th>
      <th><i class="fa fa-calendar"></i> Date Added</th>
      <th><i class="fa fa-cog"></i> Options</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2"><a href="#" class="btn btn-default btn-xs"><i class="fa fa-plus"></i> add entry</a>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Test entry</td>
      <td>1/19/2016</td>
      <td>
        <a href="#" class="btn btn-success btn-xs"><i class="fa fa-pencil"></i></a>
        <a href="#" class="btn btn-primary btn-xs"><i class="fa fa-calendar"></i></a>
        <a href="#" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i></a>
      </td>
    </tr>
  </tbody>
</table>

JS Fiddle demo

值得注意的是，上述方法将处理多个<table>元素，每个元素可能包含多个<tbody>元素;并且不需要对最终计数的折扣进行硬编码，因为它只选择那些应计算的元素。

参考文献：

• Array.from()。
• Array.prototype.forEach()。
• Array.prototype.reduce()。
• Arrow functions。
• document.querySelectorAll()。
• Element.closest()。
• let。