テーブル内のすべてのセルのマウスオーバーショーのチェックボックスを表示

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

を働くことを願っています。ただ、noneにinput type="checkbox"のデフォルトdisplayを設定し、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(); 
     }); 

私は、これはあなたが簡単にすべてのJavaScriptを使用していないこれを達成することができます

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とすることができます。