jQuery - переменная вместо идентификатора таблицы

Question

Как использовать переменную вместо идентификатора таблицы?

Например, я хочу заменить идентификатор #myTable на переменную table.

function findFruitColor(table, fruit) {


  let colKey = $("#myTable th:contains('Fruit')").index();
  let colVal = $("#myTable th:contains('Color')").index();

  $('#myTable tr td:nth-child(' + (colKey + 1) + ')').each(function() {

    if ($(this).text() === fruit) {
      color = $(this).siblings('td').addBack().eq(colVal).text();
      return false;
    }

  })


  // Display the color that was found 
  if (typeof color !== 'undefined') {
    console.log("The color for " + fruit + " is " + color);
  }


}

// Call the function
findFruitColor("#myTable", "apple");

th {
  font-weight: bold;
  width: 11em;
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="myTable">
  <tr>
    <th>Fruit</th>
    <th>Color</th>
  </tr>
  <tr>
    <td>apple</td>
    <td>red</td>
  </tr>
  <tr>
    <td>banana</td>
    <td>yellow</td>
  </tr>

Посмотреть на jsFiddle

Answer 1

Современный способ

Использование литералов шаблона :

let colKey = $(`${table} th:contains('Fruit')`).index();

Литералы шаблона избавят вас от головной боли, связанной с экранированием кавычек. Найдите поддержку браузера для этого здесь .

Старый способ (который вы уже используете в своем примере кода):

Использовать конкатенацию строк:

let colKey = $(table + " th:contains('Fruit')").index();