Question

我需要扩展这段代码才能制作它所以我有9 x 9板，当我在其中放入一些nunbers然后按下它完成9x9的按钮，其中包含行和列中唯一的数字

<meta charset="utf-8">
<style>
    input { font-size: 20px; width: 30px; text-align: center; }
</style>
<h1 id="a"></h1>
<button type="button" id="b" onClick="uzup()">uzupe�nij</button>

for( i=1; i<6; i++ ) {
  document.getElementById('a').innerHTML += '<input id="a' + i + '" maxlength="1" pattern="^[1-5]$">';
}
function uzup() { 
  for(i=1;i<6;i++){
    w = document.getElementById('a'+i).value;
    if( w == '' ) {
      w = Number(w);
      for(j=1;j<6;j++){
        jest = false;
        for(k=1;k<6;k++){
          w = document.getElementById('a'+k).value;
          if( w != '' ){
            if( Number(w) == j ) jest = true;
          }
        }
        if( !jest ) {
          document.getElementById('a'+i).value = j; break; 
        }
      }
    }
  }
}

Answer 1

我不知道我是否做对了。有这样的输入

1 3 _
4 _ 5
5 _ 2

你想要这样的结果吗？

1 3 4
4 1 5
5 4 2

是正确的吗？

我尝试以最明显和最清晰的方式进行操作（真正的代码会在大约10％的行数中完成，但是具有设计良好的Perl脚本的易读性;-)我希望您理解没有广泛评论的流程。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Nine By Nine</title>
  <script type="text/javascript">

    function clearTable(){
      for(var i = 0; i<9; i++){
        document.getElementById("c"+i).style.border = "1px solid grey";
        document.getElementById("i"+i).value = "";
      }
    }

    // Some checks & balances omitted!
    function fillUp(){
      var m = [],d,c,r;

      var gotoError = function(idx){
         document.getElementById("c"+idx).style.border = "1px solid red";
      };

      var checkField = function(n, row, col){
            for(var i=0;i<3;i++){
              if(i !== col && m[row * 3 + i] === n)
                return false;
            }
            for(var i=0;i<3;i++){
              if(i !== row && m[col + 3 * i] === n)
                return false;
            }
            return true;
      };

      var resetTable = function(){
        for(var i = 0; i<9; i++){
          m[i] = -1;
          document.getElementById("c"+i).style.border = "1px solid grey";
        }
      };

      resetTable();        

      for(var i = 0; i<9; i++){
        var val = document.getElementById("i"+i).value;
        if(val){
          d = parseInt(val);
          if(isNaN(d)){
            gotoError(i);
            return;
          }
          c = i%3;
          r = Math.floor(i/3);
          if(!checkField(d,r,c)){
            gotoError(i);
            return;
          }
          m[i] = d; 
        }
      }
      for(var i=0;i<9;i++){
        if(m[i] === -1){
          for(var j = 1;j<6;j++){
            c = i%3;
            r = Math.floor(i/3);
            if(checkField(j,r,c)){
              document.getElementById("i"+i).value = j;
              m[i] = j
              break;
            }
          }
        }
      }
    }
    window.addEventListener('submit', function(ev) { 
      ev.preventDefault();
      fillUp();
    }, false)
  </script>
  <style type="text/css">
    table {
             padding: 1em 1em 1em 1em;
             background-color: lightgreen;
          }
    td {
         border: 1px solid grey;
         padding: 5px 5px 5px 5px;
         margin: 5px 5px 5px 5px;
         background-color: lighgrey;
       }
    input {
            width: 1.1em;
            height: 1.1em;
            text-align:center;
          }
  </style>
</head>
<body>
  <form id="form0">
   <table id="table0">
     <tr id="r0">
       <td id="c0"><input id="i0" maxlength="1" pattern="^[1-5]$"></td>
       <td id="c1"><input id="i1" maxlength="1" pattern="^[1-5]$"></td>
       <td id="c2"><input id="i2" maxlength="1" pattern="^[1-5]$"></td>
     </tr>
     <tr id="r1">
       <td id="c3"><input id="i3" maxlength="1" pattern="^[1-5]$"></td>
       <td id="c4"><input id="i4" maxlength="1" pattern="^[1-5]$"></td>
       <td id="c5"><input id="i5" maxlength="1" pattern="^[1-5]$"></td>
     </tr>
     <tr id="r2">
       <td id="c6"><input id="i6" maxlength="1" pattern="^[1-5]$"></td>
       <td id="c7"><input id="i7" maxlength="1" pattern="^[1-5]$"></td>
       <td id="c8"><input id="i8" maxlength="1" pattern="^[1-5]$"></td>
     </tr>
   </table>
   <button id="bt0" type="button" onclick="fillUp()">Fill Up</button>
   <button id="bt1" type="button" onclick="clearTable()">Clear Table</button>
  <form>
</body>
</html>

自动填写数字

1 个答案: