顯示錶格中每個單元格的鼠標懸停顯示覆選框

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是: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>

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。