Question

我希望设计一个具有单行和2列的表格。当我单击单元格A1中的值时，我希望其描述显示在A2中。例如，如果A1包含B，则仅当我单击B时，A2才会显示Bat。使用HTML编码实现此目的的最简单方法是什么？

Answer 1

如果您愿意尝试使用javascript，可以尝试一下。

// will check the answer closest to clue and show it in the next td
$(".clue").on("click", function(){

  // get the answer 'Bat' in this case.
  var answer = $(this).closest("tr").find(".answer").attr("data-id");

  // put 'Bat' in the next td with the class answer.
  $(this).closest("tr").find(".answer").html(answer);

});

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 5px;
  width: 100px;
}

.clue:hover {
  cursor: pointer;
  background: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<table>
  <tr>
    <td class="clue">
      B
    </td>
    <td class="answer" data-id="Bat"></td>
  </tr>
</table>

Answer 2

如果您不需要点击，并且可以将鼠标悬停，则可以不用JavaScript：

<!DOCTYPE html>
<html>
<head>
        <title>Hover Test</title>
        <meta charset="UTF-8" />
        <style>
                td+td       { font-size: 0; }
                td:hover+td { font-size: 1em; transition: 2s; }
        </style>
</head>
<body>
        <h1>Hover Test</h1>
        <table>
                <tr> <td>B</td> <td>Bat</td> </tr>
        </table>
</body>
</html>

显示点击值

2 个答案: