1

jQuery Datatable の tr にマウスを合わせると、編集ボタンと削除ボタンを表示しようとしています。その過程で、私はほぼ完了しましたが、編集ボタンと削除ボタンを含むように 3 番目の列を定義しました。

以下はhtmlとjQueryコードです

<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td></td>
         <!-- <td>Extra td</td> -->
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td></td>
         <!-- <td>Tokyo</td> -->
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
         <td></td>
         <!-- <td>San Francisco</td> -->
      </tr>
      <tr>
         <td>Cedric Kelly</td>
         <td>Senior Javascript Developer</td>
         <td></td>
         <!-- <td>Edinburgh</td> -->
      </tr>
   </tbody>
</table>

jQuery/js コード

var trIndex = null;
 $("#example tr td").mouseenter(function() {
     trIndex = $(this).parent();
     $(trIndex).find("td:last-child").html('<a href="">Edit</a>&nbsp;&nbsp;<a href="">Delete</a>');
 });

 // remove button on tr mouseleave

 $("#example tr td").mouseleave(function() {
     $(trIndex).find('td:last-child').html("&nbsp;");
 });

以下のスクリーンショットは私の出力を表しています。 ここに画像の説明を入力

編集および削除操作は、2 番目の列 td に対するもののようです。以下の例のようにしたいのですが、編集と削除の列が表示されず、さらにこれらはテーブルの外にあるように見えます ここに画像の説明を入力

4

1 に答える 1

2

編集/削除ボタンをテーブルの外に配置すると問題が発生します。mouseenter/mouseleave メソッドはテーブル用であるため、マウスが編集/削除ボタンの上にある場合、テーブルの mouseleave と見なされ、ボタンはまったく表示されません。

代わりに、編集/削除ボタン用の列も用意し、テーブルの外にあるかのようにスタイルを設定します。

オプションで、最後の列がどのように表示されるかを定義できcolumnDefsます。このようなものかもしれません

var myTable = $('#example').DataTable({
    "columnDefs": [{ "targets": [2], "orderable": false, width: '20%', "sClass": 'options' }]
});

上記のコードは、幅を設定し、広告上の並べ替えアイコンを削除optionsし、最後の列のクラスを追加します。

テーブルの外にあるかのように見せるには、CSS が必要です。以下はそれを行う必要があります

#example{
    border-bottom: none;
}
#example tr:last-child td:not(.options){ /* <---- options will be the class for last column */
    border-bottom: 1px solid;
}
#example .options{
    background: white;
    border: none;
}

ここにデモがありますhttp://jsfiddle.net/dhirajbodicherla/189Lp6u6/7/

于 2015-06-17T17:09:07.997 に答える