gpt4 book ai didi

javascript - 使用 jquery 更改表格单元格的背景颜色

转载 作者:行者123 更新时间:2023-11-28 06:29:53 26 4
gpt4 key购买 nike

首先我想解释一下我的任务是什么。我必须使用 php 创建一个 10X10 的表格,其中填充从 1 到 100 的数字,并随机选择一个表格单元格。用户的任务是通过单击表格来找到该单元格。每次单击后,用户单击和所选单元格之间的距离将被打印到文本区域中。代码工作正常,但我需要做的另一件事是,如果单击的单元格不正确,则将单元格的背景颜色更改为红色,如果用户猜测该单元格,则将其更改为绿色。我尝试将调用更改实现为函数,但它是在第二次猜测之后调用的,而不是在第一次猜测之后调用的。有人可以帮我吗?

HTML/PHP 代码:

<!DOCTYPE html>
<html>
<head>

<title>find cell</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
table{border-collapse:collapse;}
td{width:50px;height:50px;border: 2px solid #000000; background-color:#ff6600;color:white;text-align:center;}
h2{color:grey;}
</style>

<script type="text/javascript">
function check(x,y){
$.get("check.php?x="+x+"&y="+y, function(answer){
$("#res").prepend(answer+"\n");
});
}
</script>


</head>

<body>

<h1>Find cell...</h1>
<h2>(Refresh site to start again.)</h2>

<table>
<?php
session_start();

for($j=0;$j<10;$j++){
echo "<tr>";
for($i=0;$i<10;$i++){
echo "<td onclick='check(".$j.",".$i.");'>".($j*10+($i+1))."</td>";
}
echo "</tr>";
}

$_SESSION["rx"]=rand(0,9);
$_SESSION["ry"]=rand(0,9);
$_SESSION["p"] = 0;
?>
</table>

<br>

<form method="GET">
<textarea rows="30" cols="50" id="res" style="overflow:scroll;"></textarea>
</form>

</body>

<html>

检查.php 文件:

<?php
if(isset($_GET["x"]) && isset($_GET["y"])){
session_start();
$_SESSION["p"]++;
if($_GET["x"] == $_SESSION["rx"] && $_GET["y"] == $_SESSION["ry"]){
echo "Victorious after ".$_SESSION["p"]." tries.";
}
else{
$distance = sqrt(($_SESSION["rx"]-$_GET["x"])*($_SESSION["rx"]-$_GET["x"])+($_SESSION["ry"]-$_GET["y"])*($_SESSION["ry"]-$_GET["y"]));
echo intval($distance);
}
}
?>

最佳答案

你碰巧想要像 this 这样的东西吗? ?

HTML

<h1>Find cell...</h1>
<h2>(Refresh site to start again.)</h2>

<table>
<tbody>
<tr>
<td data-j="0" data-i="0">1</td>
<td data-j="0" data-i="1">2</td>
</tr>
<tr>
<td data-j="1" data-i="0">3</td>
<td data-j="1" data-i="1">4</td>
</tr>
</tbody>
</table>

<br>

<form method="GET">
<textarea rows="30" cols="50" id="res" style="overflow:scroll;"></textarea>
</form>

脚本

var correctJ = 1; // Cell #3
var correctI = 0; // Cell #3

$("td").click(function() {
if ($(this).attr('data-j') == correctJ && $(this).attr('data-i') == correctI) {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});

关于javascript - 使用 jquery 更改表格单元格的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34795240/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com