突出显示表格每一行中的最高数字

Question

我要突出显示表格每行中的最高数字。我想使用CSS类.max。但是我需要避免在第一列和第一行中进行搜索，并且还要省略空单元格。

table,
th,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

tr:nth-child(even) {
  background-color: #e5e5e5;
}

.max {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>ITEMS</th>
    <th>SHOP1</th>
    <th>SHOP2</th>
    <th>SHOP3</th>
  </tr>
  <tr>
    <th>ITEM1</th>
    <th>2</th>
    <th>1,333333</th>
    <th>1,5</th>
  </tr>
  <tr>
    <th>ITEM2</th>
    <th>6</th>
    <th>5</th>
    <th>4</th>
  </tr>
  <tr>
    <th>ITEM3</th>
    <th>4</th>
    <th>30</th>
    <th>20</th>
  </tr>
</table>

Answer 1

要进行此工作，您可以遍历每一行并在单元格中创建值的数组，然后将它们转换为浮点数。然后，您可以使用reduce()获取具有最高值的单元格的索引并将其添加到类中。

请注意，我稍微修改了HTML，以使选择相关的单元格更加容易。即分别使用thead和tbody分隔标题单元格和主体，还将我们要定位的单元格更改为td而不是th。试试这个：

$('tbody tr').each(function() {
  var $tds = $(this).find('td');
  var values = $tds.map(function() {
    return parseFloat($(this).text().trim().replace(',', '.'));
  }).get();
  $tds.eq(values.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax, 0)).addClass('max');
});

table,
th,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

tr:nth-child(even) {
  background-color: #e5e5e5;
}

.max {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>ITEMS</th>
      <th>SHOP1</th>
      <th>SHOP2</th>
      <th>SHOP3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>ITEM1</th>
      <td>2</td>
      <td>1,333333</td>
      <td>1,5</td>
    </tr>
    <tr>
      <th>ITEM2</th>
      <td>6</td>
      <td>5</td>
      <td>4</td>
    </tr>
    <tr>
      <th>ITEM3</th>
      <td>4</td>
      <td>30</td>
      <td>20</td>
    </tr>
  </tbody>
</table>