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

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

根據您的問題和意見，我相信你的要求如下：

• 迭代通過表
• 對於每一行的所有行，與第一列 比較所有後續列
  • 如果是一樣的，移動到下一行
  • 如果不一樣，停止

考慮到這一點，你的邏輯將是相當簡單：

1. 迭代通過所有<tr>元素
2. 在每一行，得到的第一列文本和陣列所有後續欄目中的文字內容。這可以通過在這個數組jQuery.map(...).get()
3. 迭代來完成，如果是不同的（通過返回true）
4. 每個元素比較第一列文本
   • 如果是等價的，我們移動到下一行，我們止步不前（通過返回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

嘗試做這樣的事情：

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(); 
 
});

<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>

如何只是一個例子它可以工作。