burebistaruler burebistaruler - 3 months ago 13
CSS Question

Javascript table validations on col, row and square

How do I validate that a value (number) exist only on column or row or square just once.

I have a table populated from an array with and after populating that table I want to verify that a number exist only on a row or column or a square and eventually giving an error for duplicated numbers that meet this condition



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

.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*/

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




Answer

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

    function columnCount(columnIndex, value) {
      var count = 0;
      // For each row, get the n-th span,
      $(".table .row span:nth-child(" + (columnIndex+1) + ")").each(function(i,e) {
        if (e.innerHTML == value) count++;
      });

      return count;
    }

    function rowCount(rowIndex, value) {
      var count = 0;
      $(".table .row:nth-child(" + (rowIndex+1) + ") span").each(function(i,e) {
        if (e.innerHTML == value) count++;
      });

      return count;
    }

    function allCount(value) {
      var count = 0;
      $(".table .row span").each(function(i,e) {
        if (e.innerHTML == value) count++;
      });

      return count;
    }

console.log("allCount(6): " + allCount(6));
console.log("columnCount(0, 6): " + columnCount(0,6));
console.log("rowCount(0, 6): " + rowCount(0,6));
.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*/
<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>

EDIT per comments:

Say it happens whenever an <div class="row"><input class="sudoku-number-field">...</div> is .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");
});

Note that the JavaScript functions would need to have .table .row input (instead of .table .row span) selectors for this to work with inputs.