Question

我们说我有下表：

<table id="mytable">
<thead>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 4</th>
  </tr>
</thead>
<tbody>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tbody>

我希望看看它是否有一个特定的列基于是否存在＆＃34; th＆＃34;那个文字？有没有办法让＃34; HasColumn＆＃34;这样的方法如下？

  var hasCol = HasColumn("#mytable", "Col 1");
  //hasCol = true;

  var hasCol = HasColumn("#mytable", "Col 50");
  //hasCol = false;

Answer 1

您可以使用:contains选择器，但它不会使用完全匹配条件，即如果您将Col 1传递给选择器并且其中一个元素有Col 12文本内容然后它将选择该元素，因为它包含指定的文本。我使用filter方法：

var hasColumn = $('#mytable thead th').filter(function() {
   return this.textContent === 'Col 1';
}).length > 0;

这是一个vanilla JavaScript替代方案：

function hasColumn(tblSel, content) {
    var ths = document.querySelectorAll(tblSel + ' th');
    return Array.prototype.some.call(ths, function(el) {
         return el.textContent === content;
    });
};

var hasCol = hasColumn('#mytable', 'Col 1');

Answer 2

使用:contains()

    console.log($('#mytable th:contains(Col 1)').length);
    console.log($('#mytable th:contains(Col 50)').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tbody>

Answer 3

function HasColumn(selector,text){
    return $(selector +' th:contains('+text+')').length > 0;
}

如何使用jQuery确定某个html表头是否存在？

3 个答案: