html设置单元格产生点击效果,可点击的html表格单元格-优快云博客

这篇博客介绍了如何使用HTML和JavaScript实现一个点击单元格的玩家对战（PVP）游戏。内容包括清除表格、确定游戏开始顺序、设置单元格点击效果以及更新游戏状态。通过示例代码展示了如何监听表格单元格的点击事件，改变单元格背景颜色和内嵌文字，并更新游戏提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Collection.aggregate(

{

"$group": {

"_id": "$user_id",

"nameCount": { "$sum": 1 },

"branch_id": {

"$sum": {

"$cond": [ {"$branch_id":{"$ne":null}} ]

}

{

"$project": {

"_id": 0,

"name": "$_id",

"nameCount": 1,

"branch_id":1

}

);

var $ = function(id) {

return document.getElementById(id);

};

var newGameAction = function()

{

//clear table

$("c1").innerHTML = "";

$("c2").innerHTML = "";

$("c3").innerHTML = "";

$("c4").innerHTML = "";

$("c5").innerHTML = "";

$("c6").innerHTML = "";

$("c7").innerHTML = "";

$("c8").innerHTML = "";

$("c9").innerHTML = "";

};

var pVpAction = function(elem)

{

var outputTect;

var turnCounter = 0;

var first_Turn = Math.floor(Math.random() * 2);

$("firstTurn").innerHTML = first_Turn;

first_turn = $("firstTurn").innerHTML;

if(first_turn == 0)

{

message = "O goes first";

}

if(first_turn == 1)

{

message = "X goes first";

}

$("goNext").innerHTML = message;

};

var playPVPGame = function(elem)

{

var turn = $("goNext").innerHTML;

var message;

if(turn == "O goes first")

{

elem.style.backgroundColor = "red";

elem.innerHTML = "O";

turn = "X is next";

$("goNext").innerHTML = turn;

}

if(turn == "X goes first")

{

elem.style.backgroundColor = "blue";

elem.innerHTML = "X";

turn = "O is next";

$("goNext").innerHTML = turn;

}

//does not work

/*if($("goNext").innerHTML = "X is next")

{

$("newGame").disabled = true;

}*/

message = $("goNext").innerHTML;

if(message == "X is next")

{

elem.style.backgroundColor = "blue";

elem.innerHTML = "X";

message = "O is next";

$("goNext").innerHTML = message;

}

if(message == "O is next")

{

elem.style.backgroundColor = "red";

elem.innerHTML = "O";

message = "X is next";

$("goNext").innerHTML = message;

}

};

window.onload = function() {

$("newGame").onclick = newGameAction;

$("playerVplayer").onclick = pVpAction;

};

table {width:100%}

table tr td{border:1px solid #000;height:50px;}