使用jQuery验证0/1输入矩阵表格：获取每行单元格值并做条件判断

嗨，我来帮你搞定这个二进制矩阵的验证需求！下面是具体实现方案，完全贴合你要的逐行获取值+条件判断的需求：

第一步：先搭好基础HTML结构 #

假设你的矩阵表格和验证按钮是这样的（如果你的<td>里是纯文本而非输入框，后面代码稍作调整即可）：

<table id="binaryMatrix">
  <tr>
    <td><input type="text" placeholder="输入0/1"></td>
    <td><input type="text" placeholder="输入0/1"></td>
    <td><input type="text" placeholder="输入0/1"></td>
    <td><input type="text" placeholder="输入0/1"></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="输入0/1"></td>
    <td><input type="text" placeholder="输入0/1"></td>
    <td><input type="text" placeholder="输入0/1"></td>
    <td><input type="text" placeholder="输入0/1"></td>
  </tr>
</table>
<button id="validateBtn">验证矩阵</button>
<div id="resultDisplay"></div>

第二步：编写核心JavaScript逻辑 #

点击按钮时，我们会逐行遍历表格，取出每个<td>的值，同时做0/1的合法性验证，最后输出你要的格式结果：

document.getElementById('validateBtn').addEventListener('click', function() {
  const table = document.getElementById('binaryMatrix');
  const allRows = table.querySelectorAll('tr');
  const resultBox = document.getElementById('resultDisplay');
  let isMatrixValid = true;
  let resultText = '';

  // 遍历每一行
  allRows.forEach((row, rowIndex) => {
    const rowCells = row.querySelectorAll('td');
    const currentRowValues = [];

    // 遍历当前行的每个单元格
    rowCells.forEach(cell => {
      // 区分输入框和纯文本单元格的取值方式
      const cellValue = cell.querySelector('input') 
        ? cell.querySelector('input').value.trim() 
        : cell.textContent.trim();
      
      currentRowValues.push(cellValue);

      // 条件判断：验证是否是0或1
      if (cellValue !== '0' && cellValue !== '1') {
        isMatrixValid = false;
        // 给错误单元格加红色边框提示
        cell.style.border = '2px solid #ff4444';
      } else {
        cell.style.border = ''; // 恢复正常样式
      }
    });

    // 拼接成你要的格式：RowX: 值1,值2,值3...
    resultText += `Row${rowIndex + 1}: ${currentRowValues.join(',')}\n`;
  });

  // 展示最终结果
  if (isMatrixValid) {
    resultBox.textContent = `✅ 矩阵验证通过！\n${resultText}`;
    resultBox.style.color = '#2ecc71';
  } else {
    resultBox.textContent = `❌ 验证失败！存在非0/1的输入\n${resultText}`;
    resultBox.style.color = '#ff4444';
  }
});

关键细节说明 #

• 灵活取值：自动适配<td>里是输入框还是纯文本的情况，用trim()去掉空格避免误判。
• 逐行验证：遍历每一行时实时检查每个单元格的值，一旦发现非法输入立刻标记验证失败，并给对应单元格加视觉提示。
• 结果格式化：严格按照你要的Row1: 1,0,0,1格式输出每行数据。

纯文本<td>的适配 #

如果你的表格<td>里是直接显示的文本（没有输入框），只需要把取值代码改成下面这一行即可：

const cellValue = cell.textContent.trim();

这样点击按钮后就能完美实现你想要的功能啦！

内容的提问来源于stack exchange，提问作者user9402741