HI, I have a task to change the javascript part of the code to apply the sudoku rules to this webpage. I already did it for the row but I am struggling for the column and the 3x3 rule. Can you please help me? I can only edit the javascript of the. Here is the code:
















<!DOCTYPE html>
<html>
<head>
<title>Sudoku</title>
<style>
table#sudoku td {width: 2.5em; height:2.5em;
border-width: 1px;
border-style: solid;
border-color: black;
font-weight: bold;
text-align: center
}

table#sudoku {
border-width: 3px;
border-style: solid;
border-color: black
}

table#sudoku td[id^=cell_2] {border-right-width: 2px}
table#sudoku td[id^=cell_5] {border-right-width: 2px}
table#sudoku td[id$=_2] {border-bottom-width: 2px}
table#sudoku td[id$=_5] {border-bottom-width: 2px}
td.selected {background-color: rgb(100%, 70%, 0%)}
td.tofill {color: blue}
</style>
<script>
var current_cell = null; // the currently selected cell
function initialize() {
var col, row;
// Work through all the cells in the table and set
// onclick event handlers and classNames for the empty
// ones.
for (row = 0; row <=8; row++) {
for (col=0; col <= 8; col++) {
var cell = document.getElementById('cell_' + col + '_' + row);
if (!parseInt(cell.innerHTML)) {
// cell is empty
cell.onclick = selectCell;
cell.className = 'tofill';
}
}
}
document.onkeypress = keyPress;
}

// mouse button event handler
function selectCell() {
if (current_cell !== null) {
current_cell.className = 'tofill';
}
current_cell = this;
current_cell.className = 'selected';
}

// Capture keyboard key presses. If the key pressed is a digit
// then add it to the current cell. If it is a space then empty
// the current cell.
function keyPress(evt) {
if (current_cell == null)
return;
var key;
if (evt)
// firefox or chrome
key = String.fromCharCode(evt.charCode);
else
// IE
key = String.fromCharCode(event.keyCode);
if (key == ' ')
current_cell.innerHTML = '';
else if (key >= 1 && key <= 9)
{
var exists = 0
for (var i=0;i<9;i++)
{
var cell="cell_"+i+"_"+(current_cell.id.substring(current_cell.id.length,7));
if(document.getElementById(cell).innerHTML == key)
{ alert("Cannot enter the same number twice in the same row");
exists= exists + 1
}


}



if(exists == 0)
{
current_cell.innerHTML = key;
}


}
}
</script>
</head>
<body onload="initialize();">
<h2 align=center>Sudoku</h2>
<table align=center id="sudoku" cellspacing=0>
<tr>
<td id="cell_0_0">2</td>
<td id="cell_1_0"></td>
<td id="cell_2_0"></td>
<td id="cell_3_0"></td>
<td id="cell_4_0"></td>
<td id="cell_5_0">7</td>
<td id="cell_6_0"></td>
<td id="cell_7_0"></td>
<td id="cell_8_0"></td>
<tr>
<td id="cell_0_1"></td>
<td id="cell_1_1">5</td>
<td id="cell_2_1"></td>
<td id="cell_3_1"></td>
<td id="cell_4_1">2</td>
<td id="cell_5_1"></td>
<td id="cell_6_1"></td>
<td id="cell_7_1">1</td>
<td id="cell_8_1"></td>
<tr>
<td id="cell_0_2"></td>
<td id="cell_1_2">3</td>
<td id="cell_2_2"></td>
<td id="cell_3_2"></td>
<td id="cell_4_2">8</td>
<td id="cell_5_2"></td>
<td id="cell_6_2"></td>
<td id="cell_7_2">7</td>
<td id="cell_8_2"></td>
<tr>
<td id="cell_0_3"></td>
<td id="cell_1_3"></td>
<td id="cell_2_3">5</td>
<td id="cell_3_3">7</td>
<td id="cell_4_3"></td>
<td id="cell_5_3"></td>
<td id="cell_6_3"></td>
<td id="cell_7_3"></td>
<td id="cell_8_3">2</td>
<tr>
<td id="cell_0_4">1</td>
<td id="cell_1_4"></td>
<td id="cell_2_4"></td>
<td id="cell_3_4"></td>
<td id="cell_4_4"></td>
<td id="cell_5_4"></td>
<td id="cell_6_4"></td>
<td id="cell_7_4"></td>
<td id="cell_8_4">3</td>
<tr>
<td id="cell_0_5">9</td>
<td id="cell_1_5"></td>
<td id="cell_2_5"></td>
<td id="cell_3_5"></td>
<td id="cell_4_5"></td>
<td id="cell_5_5">6</td>
<td id="cell_6_5">1</td>
<td id="cell_7_5"></td>
<td id="cell_8_5"></td>
<tr>
<td id="cell_0_6"></td>
<td id="cell_1_6">2</td>
<td id="cell_2_6"></td>
<td id="cell_3_6"></td>
<td id="cell_4_6">7</td>
<td id="cell_5_6"></td>
<td id="cell_6_6"></td>
<td id="cell_7_6">8</td>
<td id="cell_8_6"></td>
<tr>
<td id="cell_0_7"></td>
<td id="cell_1_7">8</td>
<td id="cell_2_7"></td>
<td id="cell_3_7"></td>
<td id="cell_4_7">9</td>
<td id="cell_5_7"></td>
<td id="cell_6_7"></td>
<td id="cell_7_7">5</td>
<td id="cell_8_7"></td>
<tr>
<td id="cell_0_8"></td>
<td id="cell_1_8"></td>
<td id="cell_2_8"></td>
<td id="cell_3_8">4</td>
<td id="cell_4_8"></td>
<td id="cell_5_8"></td>
<td id="cell_6_8"></td>
<td id="cell_7_8"></td>
<td id="cell_8_8">6</td>
</table>
</body>
</html>