javascript - 在鼠标悬停时显示复选框显示表格中的每个单元格

Question

我有一个表格(如下所示)，其中每个单元格都有一个复选框，在用户将鼠标悬停在该单元格上之前，该复选框一直处于隐藏状态。如果复选框被选中，当鼠标离开单元格时它将保持显示状态，否则复选框将再次隐藏。

我遇到的问题是我不知道如何为用户当前悬停的单个单元格显示复选框。此时，将鼠标悬停在任何单元格上将显示如下所示的每个复选框:

我对单元格设置位置的看法:

@for (int i = 0; i < Model.Users.Count(); i++) {
    <tr>
         @for (int j = 0; j < Model.Users.Count(); j++) {
             string background = Model.AssignedArray[i] == j ? "background-color:#157fa0" : null;
             string text = Model.AssignedArray[i] == j ? "color:#ffffff" : null;
             <td class="tableCell" style="text-align: center; @background; @text">
                 @Model.Matrix[i, j]
                 <input type="checkbox" class="hideCheckBox" name="forcedAssigned" value="">
             </td>
          }
      </tr>

用于复选框的 JavaScript:

<script>
    $('.tableCell')
        .mouseenter(function () {

            $(".hideCheckBox").show();
        })
        .mouseleave(function () {
            if ($(".hideCheckBox").is(":checked"))
                $(".hideCheckBox").show();
            else
                $(".hideCheckBox").hide();
        });
</script>

CSS:

.hideCheckBox {
    display: none;
}

我的脚本是错误的，但我不知道如何修复以处理单个单元格。

Answer 1

您无需使用 javascript 即可轻松实现这一目标。只需将input type="checkbox"的默认display设置为none，当td为:hovered，或者 input type="checkbox" 是 :checked，覆盖 display 属性，像这样:

td {
  border: solid 1px red;
  margin: 5px;
  width: 40px;
  height: 40px;
}

td input { display: none; }

td:hover input { display: inline; }

td input:checked {display: inline; }

<table>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
</table>