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。只需将display的默认input type="checkbox"设置为none，将td设为:hover，或input type="checkbox"为{{1} ，覆盖:checked属性，如下所示：

＆＃13;

display

＆＃13;

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; }

＆＃13;

Answer 2

$('.tableCell')
        .mouseenter(function () {

            $(this).find(".hideCheckBox").show();
        })
        .mouseleave(function () {
            if ($(this).find(".hideCheckBox").is(":checked"))
                $(this).find(".hideCheckBox").show();
            else
                $(this).find(".hideCheckBox").hide();
        });

我希望这会起作用

Answer 3

https://jsfiddle.net/ganesh16889/62h554av/

<table border="1">
    <tr>
        <td>
            <input type="checkbox" /> Check 01
        </td>
        <td>
            <input type="checkbox" /> Check 02
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" /> Check 03
        </td>
        <td>
            <input type="checkbox" /> Check 04
        </td>
    </tr>
</table>

input[type="checkbox"] { display : none; } 
// Keep the checkboxes hidden first.
td:hover input[type="checkbox"] { display : block; } 
// when mouse over, shows the checkbox of the hovered td and on mouse leave hide it.
input[type="checkbox"]:checked { display : block; } 
// when checkbox is checked, it keeps it shown

试试这个

而不是display : block，您可以display : inline或display : inline-block。

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

3 个答案: