Question

我在一个页面中有两个表。第一个表 id 是个人的，第二个是就业。此页面由Ajax方法呈现。如果两个表中的前一个单元格值不同，我想突出显示该单元格。但我不能在两张桌子上这样做。我只能在第一张桌子或第二张桌子上这样做。这是下面的图片。

这是我的代码..

$("#personal tr").each(function () {
                  $(this).find('td').each(function (index) {
                    var currentCell = $(this);
                    var nextCell = $(this).closest('tr').next('tr').find('td').eq(index).length > 0 ? $(this).closest('tr').next('tr').find('td').eq(index) : null;

                    if ( currentCell.text() !== nextCell.text()) {
                        currentCell.css('backgroundColor', '#47d2d6');
                    }
                  });
                });
                $("#employment tr").each(function () {
                  $(this).find('td').each(function (index) {
                    var currentCell = $(this);
                    var nextCell = $(this).closest('tr').next('tr').find('td').eq(index).length > 0 ? $(this).closest('tr').next('tr').find('td').eq(index) : null;

                    if ( currentCell.text() !== nextCell.text()) {
                        currentCell.css('backgroundColor', '#47d2d6');
                    }
                  });
                });

我在ajax请求中用success方法编写的所有代码。我之前尝试过

$("table").each(function () {
  $("tr").each(function () {
              $(this).find('td').each(function (index) {
                var currentCell = $(this);
                var nextCell =    $(this).closest('tr').next('tr').find('td').eq(index).length > 0 ? $(this).closest('tr').next('tr').find('td').eq(index) : null;

                if ( currentCell.text() !== nextCell.text()) {
                    currentCell.css('backgroundColor', '#47d2d6');
                }
              });
            });
});

但它不起作用。怎么做？

Answer 1

您可以通过检查td相对于其父表

来简化您的代码

function diffTables(left, right) {

  const $left = $(left).find('td')
  const $right = $(right).find('td')
  const ll = $left.length
  let ii = 0
  
  for (; ii < ll; ++ii) {
    const $leftItem = $left.eq(ii)
    const $rightItem = $right.eq(ii)

    if ($leftItem.text() !== $rightItem.text()) {
      // td's don't have the same value
      $($leftItem).add($rightItem).addClass('different')
    }
  }
}

diffTables('#left', '#right')

html {
  font-family: cursive;
}

.different {
  color: red;
}
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="left" border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>not</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>same</td>
    </tr>
  </tbody>
</table>

<table id="right" border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>same</td>
    </tr>
    <tr>
      <td>5</td>
      <td>4</td>
      <td>same</td>
    </tr>
  </tbody>
</table>

Answer 2

谢谢大家。我通过稍微改变我的代码解决了它。这是我的代码..

$("tr").each(function () {
                  $(this).find('td').each(function (index) {
                    var currentCell = $(this);
                    var nextCell = $(this).closest('tr').next('tr').find('td').eq(index).length > 0 ? $(this).closest('tr').next('tr').find('td').eq(index) : null;

                    if (nextCell != null && currentCell.text() !== nextCell.text()) {
                        currentCell.css('backgroundColor', '#47d2d6');
                    }
                  });
                });

在 if 条件中，我添加了 nextCell！= null＆amp;＆amp; 。这是我的桌子。

如何在同一页面的两个表中通过jQuery或Java Script突出显示列的前一个单元格中的当前单元格？

2 个答案: