col，row和square上的Javascript表验证

Question

如何验证值（数字）仅存在于列，行或方块上一次。

我有一个从数组中填充的表，在填充该表之后，我想验证一个数字仅存在于行或列或正方形上，并最终给出符合此条件的重复数字的错误

＆＃13;

＆＃13;

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

Array.from(document.getElementsByClassName('cell')).forEach(function(e, i) {
  e.textContent = arr[Math.round(Math.random()*(arr.length-1))];
});

＆＃13;

.container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items : center;
    justify-content : center;
    margin-bottom: 0;
}

.table {
    display:table;
    border: 2px solid #444;
    border-collapse: collapse;
    position: relative;
}
.row {
    display:table-row;
    position: relative;
    z-index:-1;
}
.cell {
    display:table-cell;
    padding:8px;
    border: 1px solid #ff0000;
    text-align: center;
}
.cell:nth-child(2), .cell:nth-child(4):nth-child(-n+3){border-right: 5px solid #555; } /*vertical*/
.row:nth-child(3) .cell, .row:nth-child(6) .cell{border-bottom: 5px solid #555;}  /*horizontal*/

＆＃13;

<div class="container">
<div class="table">
  <div id="mytab1" class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
     </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.container{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items : center;
    justify-content : center;
    margin-bottom: 0;
}

.table {
    display:table;
    border: 2px solid #444;
    border-collapse: collapse;
    position: relative;
    margin-bottom: 100px;
}
.row {
    display:table-row;
    position: relative;
    z-index:-1;
}
.cell {
    display:table-cell;
    padding:8px;
    border: 1px solid #ff0000;
    text-align: center;
}
.cell:nth-child(2), .cell:nth-child(4):nth-child(-n+3){border-right: 5px solid #555; } /*vertical*/
.row:nth-child(3) .cell, .row:nth-child(6) .cell{border-bottom: 5px solid #555;}  /*horizontal*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="table">
  <div id="mytab1" class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
     </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>
  <div class="row">
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
    <span class="cell"></span>
  </div>

  </div>
</div>

＆＃13;

<div class="row"><input class="sudoku-number-field">...</div>

＆＃13;

＆＃13;

＆＃13;

每条评论

编辑：

只要.change()'d为$(".sudoku-number-field").change(function() { var rowIndex = $(this).index(".sudoku-number-field"); var value = $(this).text(); var columnIndex = $(this).parent().index(".row"); if (columnCount(columnIndex, value) != 1) { console.log("More than one " + value + " in column."); } else if (rowCount(rowIndex, value) > 1) { console.log("More than one " + value + " in row."); } else console.log("All is well"); }); ：

，就会发生这种情况

.table .row input

请注意，JavaScript函数需要.table .row span（而不是input）选择器才能与for row_f1 in f1: if not row_f1[0].startswith("-"): f2.writerow((row_f1[1],row_f1[2],row_f1[3],row_f1[7])) var1 = row_f1[1] for row_f3 in f3: if var1 in row_f3: f2.append(row_f3[2]) 一起使用。