3

テーブルを美しくするために datatables jquery プラグインを使用しています。検索ボックスをこのようにスタイル化しようとしています

CSS3 検索ボックス

ただし、データテーブルの現在の検索ボックス用にJavaScript で生成されたコードは次のようになります。

<div class="dataTables_filter" id="countstable_filter">
    <label>Search: 
          <input type="text" aria-controls="countstable" placeholder="Search">
    </label>
 </div>

検索ボックスにプレースホルダー属性を追加するための JavaScript を取得できました。しかし、Search: テキストを削除する方法がわかりません。Google でいくつかの解決策を見てきましたが、ここにはない ID をラベルに付ける必要がありました。

4

4 に答える 4

6

Search:DataTablesを使用しているため、言語変数を変更して文字列をオフにすることもできます。oLanguage.sSearchおよびjsBinsSearchに関するその他のドキュメントを参照してください。

$("#someTable").dataTable({
  oLanguage: {
    sSearch: ""
  }
});
于 2012-12-12T22:54:03.400 に答える
2

以下を含むテキストノードを削除できますSearch:。

$("#countstable_filter label").contents().first().remove();

.first()これは、ラベルの最初のノード（テキストノード）であるためです。.contents()などの機能.first()を使用すると、IDを必要とせずにノードを検索（DOMをトラバース）できます。基本的に、要素から始めて、必要な要素に到達するまで、特定の機能を使用してDOMをウォークスルーします。

于 2012-07-20T22:27:46.383 に答える
1 
var label = $('label', '.dataTables_filter');
    label.html(label.children());

フィドル

children()テキストノードは含まれないため、要素のみを使用してコンテンツを書き直し、テキストノードを削除します。

于 2012-07-20T22:33:31.300 に答える
1 
var x=document.getElementsByTagName("input");
for(var i=0;i<x.length;i++){
    var obj = x[i];
    if(obj.getAttribute("type")=='text' && obj.getAttribute("aria-controls")=='countstable' && obj.getAttribute("placeholder")=='Search'){
    // do stuff with the object
}
}
于 2012-07-20T22:30:55.760 に答える