SOURCE

/**
 * 画棋盘，30*15
 */
for (var i = 0; i < 15; i++) {
    var sum = '';
    for (var j = 0; j < 30; j++) {
        sum += '<td><div class="innerDiv"></div></td>'
    }
    $('#table').append('<tr>' + sum + '</tr>');
}

var clickNum = 0; //点击次数，决定黑白落子
var blackNum = 0; //黑棋落子数
var whiteNum = 0; //白棋落子数
var divs = $('.innerDiv');
for (var k = 0; k < divs.length; k++) {
    divs[k].onclick = function() {
        if (clickNum % 2 === 0) {
            this.className = 'innerDiv black';
            blackNum++;
            $('#blackNum').text('黑棋 - ' + blackNum);
            $('#whoGo').text('白');
        } else {
            this.className = 'innerDiv white';
            whiteNum++;
            $('#whiteNum').text(whiteNum + ' - 白棋');
            $('#whoGo').text('黑');
        }
        noClick(this);
        clickNum++;
    }
}

/**
 * 点击过后不可重复点击
 * @param element 点击元素
 */
function noClick(element) {
    element.onclick = function() {
        return false;
    }
}

<div class="w top">
    <button id="blackNum">
        黑棋 - 0
    </button>
    <button id="whoGo">
        黑
    </button>
    <button id="whiteNum">
        0 - 白棋
    </button>
</div>
<div class="w">
    <table id="table" cellpadding="0" cellspacing="0" border="1">
    </table>
</div>

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #F2F2F2;
    text-align: center;
}

.w {
    width: 1050px;
    margin: 5px auto;
}

table {
    height: 525px;
    background-color: chocolate;
}

td {
    width: 35px;
    height: 35px;
    position: relative;
}

.innerDiv {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: transparent;
    top: 50%;
    left: 50%;
    z-index: 99;
    cursor: pointer;
}

.black {
    background: #000;
}

.white {
    background: #fff;
}

.top button {
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    background: none;
    outline: none;
    border: none;
}

.top>button:nth-child(2) {
    margin: 0 50px;
}