Как выделить все столбцы, соответствующие числу с помощью jquery - PullRequest
Новая
       5

Как выделить все столбцы, соответствующие числу с помощью jquery

0 голосов
/ 11 мая 2018

У меня есть следующий код: 

var toHighlight = $('th').filter(function(){return $(this).text() == max})

var col = $(toHighlight).index();
$("td, th").filter(":nth-child(" + (col + 1) + ")").css("background-color", "gold")

Цель этого - найти столбец с наибольшим номером и изменить цвет фона.Это делает это хорошо.Моя проблема в том, что если есть несколько столбцов, которые содержат наибольшее число, я бы хотел изменить цвет всех из них.Прямо сейчас, он только делает первый найденный.

Как я могу изменить это, чтобы изменить цвет фона для всех столбцов, соответствующих максимуму?

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

@ Мамун прав, что вам нужно перебрать toHighlight.Чтобы выделить весь столбец, вам просто нужно получить индекс для каждого столбца, а затем установить все «td, th» в этом столбце.

С учетом этого HTML: 

<table>
<tr>
  <th>1</th>
  <th>7</th>
  <th>3</th>
  <th>7</th>
</tr>
<tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
  <td>d</td>
</tr>
</table>

Это будет использовать этот JS: 

var max='7';
var toHighlight = $('th').filter(function(){return $(this).text() == max});

$(toHighlight).each(function(a, colItem){
   var col = $(colItem).index();
   $("td, th").filter(":nth-child(" + (col + 1) + ")").css("background-color", "gold");
});

Вот скрипка: https://jsfiddle.net/yd4c013j/

0 голосов
/ 11 мая 2018

Вы должны использовать each() для перебора всех отфильтрованных tr s.
Затем вы можете легко выделить все элементы, используя ваш код.
(Вы были довольно близко)

Вот рабочий фрагмент: 

// I've done like max was a text.
var toHighlight = $('th').filter(function() {
  return $(this).text() == 'max'
});
$(toHighlight).each(function() {
  var col = $(this).index();
  $("td, th").filter(":nth-child(" + (col + 1) + ")").css("background-color", "gold");
})
td {
  border: 1px solid black;
  padding: 8px 32px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>x</th>
      <th>max</th>
      <th>x</th>
      <th>max</th>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>

  </tbody>
</table>

Надеюсь, это поможет.

...