Let's say I have the following table:

<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>

and I want to see if it has a certain column based on if there is a "th" with that text? Is there a way to have a "HasColumn" method like this below?

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

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

Let's say I have the following table:

<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>

and I want to see if it has a certain column based on if there is a "th" with that text? Is there a way to have a "HasColumn" method like this below?

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

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

• javascript
• jquery
• html-table

Share Improve this question Follow edited Jul 18, 2018 at 8:59 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 25, 2015 at 22:07 leoraleora 197k368368 gold badges907907 silver badges1.4k1.4k bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You could use the :contains selector but it doesn't use the exact match criterion, i.e. if you pass Col 1 to the selector and one of the elements has Col 12 text content then it will select that element as it contains the specified text. I'd use the filter method:

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

Here is a vanilla JavaScript alternative:

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

Use :contains()

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

<script src="https://ajax.googleapis./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>

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