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

我有一个表格（如下所示），其中每个单元格都有一个复选框，直到用户将鼠标悬停在该单元格上方才会隐藏复选框。如果复选框被选中，它将在鼠标离开单元格时保持显示，否则该复选框将被再次隐藏。显示表格中每个单元格的鼠标悬停显示复选框

我的问题是，我不知道如何有复选框显示该用户当前悬停在单个细胞。在一分钟，将鼠标悬停在任意单元格将显示如下每个复选框：对于其中的细胞都设置

我的观点：

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

我的脚本是错误的，但我不知道如何解决与单个单元格的工作。

来源

2017-02-13 Spitfire5793

你试过把'$（this）.find（“。hideCheckBox”）。eq（0）'而不是'$（“。hideCheckBox”）'？ – Banzay

没有必要使用JS来实现这种行为，请使用纯CSS检查我的答案。 –

您可以轻松地与不使用JavaScript在所有实现这一目标。刚刚成立的input type="checkbox"的默认display到none，当td是:hover版，或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>

来源

2017-02-13 12:44:35

感谢您的回答，似乎是最好的方式。所有其他答案都很好，谢谢大家。 – Spitfire5793

Thanks @ Spitfire5793，如果它帮助你，upvote也是让别人知道它的好方法:-)祝你好运... –

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

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

我希望这将工作

来源

2017-02-13 12:42:30

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。

来源

2017-02-13 12:46:53

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

回答

相关问题