如何使用jQuery迭代Sudoku网格单元？

Question

当用户在9 * 9 Sudoku网格的输入框中输入文本时，如何使用jQuery迭代当前单元格的行，列和当前网格（3 * 3）以检查重复项？< / p>

HTML

<form id="gridForm"><input type="checkBox" id="checkBox">
<table id="grid" border="1" style="border-collapse: collapse;">
        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="00" value="1"></td>
            <td class="cell"><input type="number" maxlength="1" name="01" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="02" value="3"></td>
            <td class="cell"><input type="number" maxlength="1" name="03" value="4"></td>
            <td class="cell"><input type="number" maxlength="1" name="04" value="5"></td>
            <td class="cell"><input type="number" maxlength="1" name="05" value="6"></td>
            <td class="cell"><input type="number" maxlength="1" name="06" value="7"></td>
            <td class="cell"><input type="number" maxlength="1" name="07" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="08" value="0"></td>

        </tr>
        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="10" value="4"></td>
            <td class="cell"><input type="number" maxlength="1" name="11" value="5"></td>
            <td class="cell"><input type="number" maxlength="1" name="12" value="6"></td>
            <td class="cell"><input type="number" maxlength="1" name="13" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="14" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="15" value="9"></td>
            <td class="cell"><input type="number" maxlength="1" name="16" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="17" value="2"></td>
            <td class="cell"><input type="number" maxlength="1" name="18" value="0"></td>

        </tr>
        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="20" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="21" value="8"></td>
            <td class="cell"><input type="number" maxlength="1" name="22" value="9"></td>
            <td class="cell"><input type="number" maxlength="1" name="23" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="24" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="25" value="3"></td>
            <td class="cell"><input type="number" maxlength="1" name="26" value="4"></td>
            <td class="cell"><input type="number" maxlength="1" name="27" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="28" value="6"></td>

        </tr>
        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="30" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="31" value="3"></td>
            <td class="cell"><input type="number" maxlength="1" name="32" value="4"></td>
            <td class="cell"><input type="number" maxlength="1" name="33" value="5"></td>
            <td class="cell"><input type="number" maxlength="1" name="34" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="35" value="7"></td>
            <td class="cell"><input type="number" maxlength="1" name="36" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="37" value="9"></td>
            <td class="cell"><input type="number" maxlength="1" name="38" value="1"></td>

        </tr>
        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="40" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="41" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="42" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="43" value="8"></td>
            <td class="cell"><input type="number" maxlength="1" name="44" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="45" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="46" value="2"></td>
            <td class="cell"><input type="number" maxlength="1" name="47" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="48" value="0"></td>

        </tr>
        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="50" value="8"></td>
            <td class="cell"><input type="number" maxlength="1" name="51" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="52" value="1"></td>
            <td class="cell"><input type="number" maxlength="1" name="53" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="54" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="55" value="4"></td>
            <td class="cell"><input type="number" maxlength="1" name="56" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="57" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="58" value="7"></td>

        </tr>
        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="60" value="3"></td>
            <td class="cell"><input type="number" maxlength="1" name="61" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="62" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="63" value="6"></td>
            <td class="cell"><input type="number" maxlength="1" name="64" value="7"></td>
            <td class="cell"><input type="number" maxlength="1" name="65" value="8"></td>
            <td class="cell"><input type="number" maxlength="1" name="66" value="9"></td>
            <td class="cell"><input type="number" maxlength="1" name="67" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="68" value="0"></td>
        </tr>

        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="70" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="71" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="72" value="8"></td>
            <td class="cell"><input type="number" maxlength="1" name="73" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="74" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="75" value="0"></td>
            <td class="cell"><input type="number" maxlength="1" name="76" value="3"></td>
            <td class="cell"><input type="number" maxlength="1" name="77" value="4"></td>
            <td class="cell"><input type="number" maxlength="1" name="78" value="5"></td>
        </tr>

        <tr class="row">
            <td class="cell"><input type="number" maxlength="1" name="80" value="9"></td>
            <td class="cell"><input type="number" maxlength="1" name="81" value="1"></td>
            <td class="cell"><input type="number" maxlength="1" name="82" value="2"></td>
            <td class="cell"><input type="number" maxlength="1" name="83" value="3"></td>
            <td class="cell"><input type="number" maxlength="1" name="84" value="4"></td>
            <td class="cell"><input type="number" maxlength="1" name="85" value="5"></td>
            <td class="cell"><input type="number" maxlength="1" name="86" value="6"></td>
            <td class="cell"><input type="number" maxlength="1" name="87" value="7"></td>
            <td class="cell"><input type="number" maxlength="1" name="88" value="8"></td>
        </tr>
    </table>
    </form>

上面代码的CSS如下所述：

#grid {
    width: 402px;
    height: 420px;
    margin-left: 20px;
    margin-top: 5px;
    position: absolute;
    display: inline-block;
    border: 3px double #000000;
}

#grid td {
    height: 30px;
    width: 30px;
    border: 1px solid #000000;
    text-align: center;
}

#grid td:first-child {
    border-left: solid;
}

#grid td:nth-child(3n) {
    border-right: solid;
}

#grid tr:first-child {
    border-top: solid;
}

#grid tr:nth-child(3n) td {
    border-bottom: solid;
}

.cell input {
    display: inline-block;
    float: left;
    border: none;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 32px;
}

到目前为止我写的jQuery：

的jQuery

 <script>
    $('table tr td input').on({"input": function () {
        var cell = $(this).val();
        if ((cell.length > 0) && !$.isNumeric(cell)) {
            alert('Please input only numbers from 1 - 9');
            $(this).val('');
        }
    }});
</script>

<script>
    $("#checkBox").change(function () {
        if (this.checked) {
            $('table tr td input').on({
                "input": function () {
                    var cellValue = $(this).val();
                    var cellName = $(this).attr('name');
                    var row = cellName.substring(0, 1);
                    var col = cellName.substring(1, 2);



                }
            });
        }
    });
</script>
<script>
    $("#grid td input").each(function () {
        var value = $(this).val();
        if (value == 0) {
            $(this).val('');
        }
    });
</script>

Answer 1

如果每列和每一行都用0到8之间的数字标识，则修改文本框i，j：

当前行：

for (var c = 0; c < 9; ++c) {
    if (c != j) {
        check cell i,c
    }
}

当前专栏：

for (var r = 0; r < 9; ++r) {
    if (r != i) {
        check cell r,j
    }
}

当前子网格：

var r3 = Math.floor(i/3), c3 = Math.floor(j/3);
for (var r = 3*r3; r < 3*(r3+1); ++r) {
    for (var c = 3*c3; c < 3*(c3+1); ++c) {
        if (r != i || c != j) {
            check cell r,c
        }
    }
}

<强>更新：

$('table tr td input').on("change", function () {
    var name = $(this).attr("name"),
        i = parseInt(name.substring(0,1)),
        j = parseInt(name.substring(1));
    etc...
});