Question

我有一个问题，我有一个动态创建的表（3x3,4x4或5x5）我试图看看每列中的文本是否与第一列相同。

到目前为止我已尝试过这个

$('tr td:first-child').find('td:contains(X)');

<table id="grid">
<tbody>
<tr>
<td>X</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>X</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

上面是创建的表的示例，该表在第一列中有两个X. 尝试在每个tr中获得第一个孩子，但我认为这是错误的。我需要比较这些值，如果它们都相等，我需要停止搜索。

Answer 1

根据您的问题和意见，我相信您的要求如下：

遍历表格中的所有行
对于每一行，将所有后续列与第一个列进行比较
- 如果相同，请转到下一行
- 如果不相同，请停止

考虑到这一点，你的逻辑将非常直接：

遍历所有<tr>元素
在每一行中，获取所有后续列中的第一列文本和文本内容数组。这可以使用jQuery.map(...).get()
遍历此数组并将每个元素与第一列文本进行比较
- 如果等效，我们将继续前进到下一行（通过返回true）
- 如果不同，我们会停在原地（通过返回false）

以下是用JS编写的逻辑：

// Iterate through each table row
$('tr').each(function() {
  // Get text content if first column
  var firstColumnText = $('td', this).first().text();

  // Construct array of text from all remaining <td>s
  var otherColumnText = $('td', this).not(':first').map(function() {
    return $(this).text();
  }).get();

  // Iterate through array and check if something is different
  // Assume text is the same
  var isEquivalent = true;
  $.each(otherColumnText, function(idx, thisColumnText) {
    if (thisColumnText !== firstColumnText) {
      isEquivalent = false;
      return false;
    }
  });

  // Stop loop when we encounter the first non-equivalent row
  return isEquivalent;
});

检查下面的概念验证：相同的行以绿色突出显示，与第一列相比具有一个或多个不同列的行以红色突出显示。请注意，一旦脚本命中第一个不相同的行，它就会退出迭代（其余的行是透明的，不再检查）：

$(function() {
  // Iterate through each table
  $('table').each(function() {

    var currentRowIndex = 0;

    // Iterate through each table row
    $('tr').each(function(i) {

      // Get text content if first column
      var firstColumnText = $('td', this).first().text();
      
      // Construct array of text from all remaining <td>s
      var otherColumnText = $('td', this).not(':first').map(function() {
        return $(this).text();
      }).get();
      
      // Iterate through array and check if something is different
      // Assume text is the same
      var isEquivalent = true;
      $.each(otherColumnText, function(idx, thisColumnText) {
        if (thisColumnText !== firstColumnText) {
          isEquivalent = false;
          return false;
        }
      });
      
      // Checking only :)
      if (isEquivalent)
        $(this).css('background-color', 'green');
      else
        $(this).css('background-color', 'red');

      // Update row cursor so we know where we stopped
      currentRowIndex = i;
      console.log('Currently looking at row ' + i + '\tIs this row equivalent? ' + isEquivalent);
      
      // Stop loop when we encounter the first non-equivalent row
      return isEquivalent;
    });
    
    // Log the zero-based index of the row where you stopped
    console.log('Last valid row: ' + (currentRowIndex - 1));
    console.log('Stopped at row: ' + currentRowIndex);
  });
});

table, table td {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
  </tr>
  <tr>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
  </tr>
  <tr>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
  </tr>
  <tr>
    <td>Same</td>
    <td>Same</td>
    <td>Different</td>
    <td>Same</td>
  </tr>
  <tr>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
  </tr>
  <tr>
    <td>Same</td>
    <td>Same</td>
    <td>Different</td>
    <td>Same</td>
  </tr>
  <tr>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
    <td>Same</td>
  </tr>
</table>

Answer 2

尝试做这样的事情：

＆＃13;

var tableElem = $('table');
var rowElems = tableElem.find('tr');

function check() {
  var isEqual = true;

  $.each(rowElems, function(index) {
    $.each($(this).find('td input'), function(index) {
      if(index === 0) {
        col1Val = $(this).val();
      } else {
        if(col1Val !== $(this).val()) {
          isEqual = false;
          return false;
        }
      }
    });
  });

  if(isEqual) {
    $('#result').text('Is equal');
  } else {
    $('#result').text('Is not equal');
  }
}

$('#check').on('click', function() {
  check();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tr>
        <td><input type="text" value="A" /></td>
        <td><input type="text" value="A" /></td>
        <td><input type="text" value="A" /></td>
      </tr>
      <tr>
        <td><input type="text" value="A" /></td>
        <td><input type="text" value="A" /></td>
        <td><input type="text" value="A" /></td>
      </tr>
      <tr>
        <td><input type="text" value="A" /></td>
        <td><input type="text" value="A" /></td>
        <td><input type="text" value="A" /></td>
      </tr>
    </table>

    <div id="result"></div>
    <button id="check">Check</button>

＆＃13;

只是它如何运作的一个例子。

检查每个tr中第一个td中的所有值是否包含相同的文本

2 个答案: