Untitled

<html>
<head>
<style>

    .chess_btn {
        width: 20px;
        height: 20px;
    }

</style>
<script>
    var phase = 0;
    var CONST_BISHOP = "X";
    var CONST_PATH = "O";

    function clear_field(){
        for (var i = 0; i < 8; i++){
            for (var j = 0; j < 8; j++){
                document.getElementById("b" + i + "_" + j).textContent = "";
            }
        }
    }

    function setBishop(btn, strict){
        if (strict && btn.textContent != CONST_PATH){
            return;
        }
        clear_field();
        btn.textContent = CONST_BISHOP;
        var row = Number(btn.dataset.row)-1;
        var column = Number(btn.dataset.column)-1;
        while(row >= 0 && column >= 0){
            document.getElementById("b" + row + "_" + column).textContent = CONST_PATH;
            row--;
            column--;
        }
        row = Number(btn.dataset.row)+1;
        column = Number(btn.dataset.column)-1;
        while(row <= 7 && column >= 0){
            document.getElementById("b" + row + "_" + column).textContent = CONST_PATH;
            row++;
            column--;
        }
        row = Number(btn.dataset.row)-1;
        column = Number(btn.dataset.column)+1;
        while(row >= 0 && column <= 7){
            document.getElementById("b" + row + "_" + column).textContent = CONST_PATH;
            row--;
            column++;
        }
        row = Number(btn.dataset.row)+1;
        column = Number(btn.dataset.column)+1;
        while(row <= 7 && column <= 7){
            document.getElementById("b" + row + "_" + column).textContent = CONST_PATH;
            row++;
            column++;
        }
    }

    function element_click(event){
        switch(phase){
            case 0: //set bishop
                setBishop(event.currentTarget, false);
                phase++;
                break;
            case 1: //move bishop
                setBishop(event.currentTarget, true);
                break;
            default:
                phase = 0;
        }
    }

    function create_table(){
        var tbl = document.createElement("table");
        tbl.setAttribute("border", "2");
        tbl.setAttribute("cellpadding", "1");
        tbl.setAttribute("cellspacing", "1");

        for (var i = 0; i < 8; i++){
            var tr = document.createElement("tr");

            for (var j = 0; j < 8; j++){
                var td = document.createElement("td");
                var btn = document.createElement("button");
                btn.addEventListener("click", element_click);
                btn.id = "b" + i + "_" + j;
                btn.setAttribute("class", "chess_btn")
                btn.dataset.column = j;
                btn.dataset.row = i;
                td.appendChild(btn);
                tr.appendChild(td);
            }
            tbl.appendChild(tr);
        }
        document.body.innerHTML = "";
        document.body.appendChild(tbl);
    }

</script>
</head>
<body>

<input type=button value="Table" onclick=create_table()>

</body>
</html>