Edit in JSFiddle

Result
HTML
JavaScript
CSS

<body>
    <h2>まるばつゲーム！！</h2>
    <h3>好きなところをクリックしてね</h3>
    <div id="main">
        <table border="1" id="field" value='field'>
            <tr>
                <td id="1" onclick="cilckfield('1')"></td>
                <td id="2" onclick="cilckfield('2')"></td>
                <td id="3" onclick="cilckfield('3')"></td>
            </tr>
            <tr>
                <td id="4" onclick="cilckfield('4')"></td>
                <td id="5" onclick="cilckfield('5')"></td>
                <td id="6" onclick="cilckfield('6')"></td>
            </tr>
            <tr>
                <td id="7" onclick="cilckfield('7')"></td>
                <td id="8" onclick="cilckfield('8')"></td>
                <td id="9" onclick="cilckfield('9')"></td>
            </tr>
        </table>
    </div>
</body>

    var batsu = '×';
	var maru = '◯';
	var maruOrBatsu = maru;

	function cilckfield(idNo) {
        if (document.getElementById(idNo).value != '◯' && document.getElementById(idNo).value != '×') {
            document.getElementById(idNo).value = maruOrBatsu;
            document.getElementById(idNo).innerHTML = maruOrBatsu;
        } else {
            alert('記入済です');
            clickfield(idNo);
        }

        if (check()) {
            alert(maruOrBatsu + 'の勝ち！');
            if (confirm('もう一回やりますか？')) {
                location.reload(true);
            }
        }

        if (maruOrBatsu == batsu) {
            maruOrBatsu = maru;
        } else {
            maruOrBatsu = batsu;
        }
	}

	function check() {
        for (i = 1; i <= 9; i++) {
            if (i == 1 || i == 4 || i == 7) {
                if (nullcheck()) {
                    if (document.getElementById(i).value == document.getElementById(i + 1).value && document.getElementById(i + 1).value == document.getElementById(i + 2).value) {
                        alert('横同じ');
                    return true;
                    }
                }
            }

            if (i <= 3) {
                if (nullcheck()) {
                    if (document.getElementById(i).value == document.getElementById(i + 3).value && document.getElementById(i + 3).value == document.getElementById(i + 6).value) {
                        alert('縦同じ');

                    return true;
                    }
                }
            }
        }

        if (document.getElementById(5).value == '◯' || document.getElementById(5).value == '×') {
            if (document.getElementById(1).value == document.getElementById(5).value && document.getElementById(5).value == document.getElementById(9).value) {
                alert('斜め同じ');
                return true;
            }

            if (document.getElementById(3).value == document.getElementById(5).value && document.getElementById(5).value == document.getElementById(7).value) {
                alert('斜め同じ');
                return true;
            }
        }

        return false;
    }

	function nullcheck() {
        if (document.getElementById(i).value == '◯' || document.getElementById(i).value == '×') {
            return true;
        }
        return false;
	}

td {
    width: 50px;
    height: 50px;
    font-size: 30px;
}
#main{
    margin: 5px 10px 5px 40px;
}