使用 jquery 更改表格单元格的背景颜色答案

【问题标题】：Changing background color of a table cell using jquery使用 jquery 更改表格单元格的背景颜色
【发布时间】：2016-01-14 16:52:40
【问题描述】：

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

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>

check.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);
    }
}
?>

【问题讨论】：

你试过用 CSS 吗？
我尝试根据返回的函数更改单元格的类，但到目前为止没有成功......还尝试使用 jquery 直接更改 css 也没有运气......
到目前为止您尝试过什么？我们在这里帮助解决您尝试过的问题，而不是完全编写解决方案。
发布您尝试过的 jQuery 脚本。您可能只是没有针对正确的 DOM 元素来更新 CSS。
你能提供一个生成table的例子吗？我想在 jsfiddle 上试试。

标签： javascript php jquery html

【解决方案1】：

您是否碰巧想要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");
  }
});

【讨论】：

这正是我希望我的单元格发生的事情，但我不知道如何在我的代码中实现它......
@Luki 基本上是一样的。我只是减少了单元格的数量并硬编码了正确的单元格坐标，因为我无法使用您的 $.get() 链接。
那么我应该在我的单元格中添加 data-j 和 data-i 属性，同时使用 php 生成表格来检查它们吗？
@Luki 据我所知，这是当今的普遍做法，而不是将onclick 放在您的HTML 中。如果您仍然想按照以前的方式进行操作，请随意这样做。您应该看的主要内容是脚本。
@Luki 给我一分钟，我会更新我的答案以反映你的编码风格。

【解决方案2】：

使用点击事件添加不同颜色的 css 类。

【讨论】：

他知道这一点（他提到试图在 jQuery 中做到这一点）。问题是他没有发布他尝试使用的 jQuery 脚本以便我们帮助调试它。
当您发布答案时，请尝试详细说明它，添加一小段代码和示例等。