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

debugcn 投稿 Dev

Spitfire5793

各セルにチェックボックスがあり、ユーザーがそのセルにマウスを合わせるまで非表示になっているテーブル（以下を参照）があります。チェックボックスがチェックされている場合、マウスがセルを離れても表示されたままになります。チェックされていない場合、チェックボックスは再び非表示になります。

私が抱えている問題は、ユーザーが現在ホバーしている個々のセルのチェックボックスを表示する方法がわからないことです。その瞬間、任意のセルにマウスを合わせると、次のようにすべてのチェックボックスが表示されます。

セルが設定されている場所に関する私の見解：

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

スクリプトが間違っていますが、個々のセルを操作するように修正する方法がわかりません。

Ronen Cypis

javascriptをまったく使用せずに、これを簡単に実現できます。ただ、デフォルト設定displayのinput type="checkbox"には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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-29

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

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

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

すべてのボックスをチェックし、テーブルの行要素を非表示にするオプション

レベル3テーブルAngularJSの[すべて]チェックボックスをオンにします

ハンズオンテーブルのすべてのチェックボックスを選択する方法

ハンズオンテーブルのすべてのチェックボックスを選択する方法

すべてのチェックボックスがオフになったときにテーブル全体を表示したままにする方法

テーブル内のセルの値を取得してテキストボックスに表示する方法

データテーブルのチェックボックスで特定の行を表示/非表示にする

左外部結合、マルチテーブル、クラシックASPアプリケーションのチェックボックスに入力する

Angular5マットテーブル内のマットチェックボックスをオン/オフにする機能が必要

他の行のすべてのチェックボックスをオンにするには、テーブルヘッダーのチェックボックスをオンにします

テーマ/スタイルすべてのチェックボックス

テーブル レイアウトのすべてのチェック ボックスをチェックする

テーブル列のすべてのチェックボックスを選択する方法-Vaadin7

チェックボックスをオン/オフにすると、vuejsはテーブル内のテーブル行を切り替えます

すべてのチェックボックスをオン/オフにするグループごと

チェックボックスグループの「その他」オプションがチェックされている場合にテキストボックスを表示する方法

チェックボックスがオンになっている場合は、テーブルのすべての行を削除しますか？

選択ボックスで空のオプションを選択すると、非表示のテーブル行がすべて表示されます

チェックボックスをオンにした後、マットテーブルの行を動的に表示する

Angularjsのすべてのテーブル行にチェックボックスを追加したい

チェックボックスの値をマットテーブルにバインドしますか？

Angular Material：テーブルの行にマウスを合わせるとチェックボックスが表示されます

mysqlテーブルの値に基づいてチェックボックスをオンにするかどうかを表示する

JQuery-同じテーブル内にないすべてのチェックボックスを無効にする

「すべて選択」を非表示にする方法-テーブルからチェックボックス？

すべてのチェックボックスデータテーブルトリガーを選択

マウスオーバー時にHTMLテーブルの行に透明なボックスを表示します（行を強調表示しません）

特定のクラスのdiv内のすべてのチェックボックスをループします

チェックボックスのチェックされた値を角度のあるオブジェクトのブール属性にバインドする

テーブルレイアウトのすべてのチェックボックスをチェックする