JQuery计数表行

JQuery count table rows

本文关键字：JQuery      更新时间：2023-09-26

我知道计算文档中标签的数量可以通过以下方式完成

var tableCount = $('body table tr').length;

现在我假设这只计算标签的数量。我想知道的是，我有相同数量的结束标签。因此，如果上面的代码显示有72个标记，我现在想要一些东西告诉我有72个结束tr标记。

这可能吗?

谢谢

理想情况下，您应该使用这样的函数:

function checkTable(tableElement) {
  // Get inner HTML
  var html = tableElement.innerHTML;
  // Count <tr>
  var count1 = html.match(/<tr/g).length;
  // Count </tr>
  var count2 = html.match(/<'/tr/g).length;
  // Equals?
  return count1 === count2;
}

然而，由于浏览器的冗长的，不匹配的标签会自动更正(即自动关闭)。因此，运行中的页面不可能验证自身。这是一个概念证明:JS Bin.

解释:第二个表有一个错字(开始标记而不是结束标记)，但是函数在两种情况下都返回true。如果检查生成的HTML(可以通过DOM访问的HTML)，可以看到浏览器自动纠正了不匹配的标签(有一个额外的空表行)。

幸运的是，还有另一种方法。要获得纯(即未被浏览器修改)HTML代码，您可以对当前页面URL发出AJAX请求。是的，你没看错，页面又自动加载了。但是不用担心，这里没有递归和可能的stackoverflow，因为您不处理获取的页面。

下面的JS代码是: 
var selfUrl = document.location.href;
function checkHTML(html) {
  // Count <tr>
  var count1 = html.match(/<tr/g).length;
  console.log(count1);
  // Count </tr>
  var count2 = html.match(/<'/tr/g).length; // </tr (do not remove this comment!)
  console.log(count2);
  // Equals?
  return count1 === count2;
}
$.get(selfUrl, function(html) {
  console.log(checkHTML(html));
});

但是要注意一个陷阱。如果您在HTML中包含了这段代码(通常不鼓励)，那么您就不能删除这条注释。原因如下:一个正则表达式包含<tr，而另一个正则表达式转义了正斜杠，因此不包含</tr。由于您获取了整个HTML代码(包括JS代码)，因此计数是不匹配的。为了做到这一点，我在注释中添加了一个额外的</tr

你的问题让我想起了SAX解析器的概念，因为HTML代码显然是XML的一种。SAX Parser通常会查看开始和结束标记，以及元素属性和内容。

前段时间，我使用了来自:http://ejohn.org/blog/pure-javascript-html-parser/的简单SAX解析器库网址:http://ejohn.org/files/htmlparser.js

使用这个库，你可以做以下事情:

$(document).ready(function(){
    var htmlString = $('#myTable').html(),
        countStart = 0,
        countEnd = 0;
    HTMLParser(htmlString, {
        start: function(tag, attrs, unary) {
            countStart += 1; // you may add the if tag === 'tr' or else
            console.log("start: " + tag);
        },
        end: function(tag) {
            countEnd += 1; // you may add the if tag === 'tr' or else
            console.log("end: " + tag);
        },
        chars: function(text) {},
        comment: function(text) {}
    });
});

也有现代的基于节点的方法，如:https://github.com/isaacs/sax-js/blob/master/examples/example.js，可以用于相同的任务。

相关文章：