ページ内に複数表がある場合のTableSorter

前へ 次へ
このQ&Aのポイント
  • JavaScriptのTableSorterを使い、表内のデータのクライアント側ソートを実現しようとしています。
  • 表が一枚の場合には問題はないのですが、表が２つになった場合に２つめの表がソート対象となってくれません。
  • どのようにすればソート対象になってくれるのでしょうか？
回答を見る
  • ベストアンサー

ページ内に複数表がある場合のTableSorteｒ

現在、JavaScriptのTableSorterを使い、表内のデータのクライアント側ソートを実現しようとしています。 表が一枚の場合には問題はないのですが、表が２つになった場合に２つめの表がソート対象となってくれません。 どのようにすればソート対象になってくれるのでしょうか？ jQuery1.9.1+TableSorter2.0.5bの環境です。 ソースは一般的なものを使用していますので割愛しますが、 オリジナルな部分があるとすれば $(function(){ $("#myTable").tablesorter(); }); とだけ書いたjavascriptを読み込んでいること、 対象となるテーブルはidがmyTable(これだけの時は動作していた)とmyTable2の２つあるということです。 情報不足があればお知らせください。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

$(function(){ $("#myTable,#myTable2").tablesorter(); });

mano31
質問者

お礼

いただいた内容でばっちり動きました！ （Typoがありましたが・・・） 素早いご回答、ありがとうございました。m(_ _)m 非常に助かりました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryのプラグイン「Tablesorter」で要素の削除

    jQueryのプラグイン「Tablesorter」でテーブルのソートをさせているのですが、 動的に行を追加したり削除する場合に困っています。 $("#myTable").tablesorter(); のようにテーブルをソートさせると、削除したはずの行が復活してしまうのです。 これはなにか対策などはあるのでしょうか？ ご存知のかたがおられましたら是非教えていただきたいです。

  • HTMLテーブルのソートとヘッダ固定が可能なプラグインを教えてください

    HTML以下の機能を持ったテーブルを実現したいと思います。 1. ソート 2. ヘッダの固定 何かよいプラグインがあれば教えてくれませんか？ お願いいたします。 現在は、以下のプラグインを使い ソート機能のみ実現しています。 jQuery 1.3.2 TableSorter 2.0.3 ここからの移行が簡単なものがあれば、なお助かります。

  • jsでページングやテーブルソートすると、重くなる？

    ・JavaScriptでページングやテーブルソートを書くと、サーバ言語で書く場合と比較して、重くなる可能性があるのでしょうか？ ・クライアントに依存するということでしょうか？ ・件数が多い場合、スマートフォンでの表示切替は厳しい？

  • 複数のバージョンのjQueryを同時に使用

    複数のjQueryライブラリを同時に使用するには http://jsajax.com/articles/jQueryUsingMultipleVersion/2012 上記サイトを参照しましたがわからなかったので質問いたします。 「1.3.2と1.1.3.1」のようにバージョンの違うjQueryライブラリを同時に使いたいのですが、 以下のように記述した場合、Feature Listが正常に動作しません。 バージョンの違うjqueryライブラリを同時に使うにはどのように設定すればいいのでしょうか よろしくお願いいたしします <script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script> <script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script> <!-- ▼jquery_auto --> <script type="text/javascript" src="jquery/jquery_auto_j.js"></script> <!-- ▼animatedcollapse.js --> <script type="text/javascript" src="jquery/animatedcollapse.js"></script> <script type="text/javascript" src="jquery/animatedcollapse-settings.js"></script> <!-- ▼Feature List --> <script type="text/javascript" src="jquery/jquery.featureList-1.0.0.js"></script> <script language="javascript"> $(document).ready(function() { $.featureList( $("#tabs li a"), $("#output li"), { start_item:0 } ); /* // Alternative $('#tabs li a').featureList({ output:'#output li', start_item:1 }); */ }); </script>

  • 複数のjavascriptを使うと動かなくなる

    下記にようにナビゲーションにljavascriptを使うと、ightboxを同じページに設置すると機能しません。 こういう場合どうすればいいでしょうか？ <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>

  • 640px以下の時のみjQueryを有効にしたい

    JQueryで、以下のソースでやりたい事が実現できました。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $('nav ul').hide(); $('.menu-icon').on('click', function() { var $navList = $(this); if($navList.hasClass("current")) { $('nav ul').slideUp(500,function(){ $navList.removeClass("current"); }); } else { $('nav ul').slideDown(500,function(){ $navList.addClass("current"); }); }; return false; }); }); </script> が、640px以上のときも、効いてしまって「nav ul」が隠れてしまいます。そこで、 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { if (window.matchMedia( '(max-width: 640px)' ).matches) { 「上記javascript」 } </script> と、切り分けをし640px以下のときだけ、jqueryが聞くようにしたつもりなのですが、以下の問題が発生しました。 640px以上の場合はjavascriptが無効になったのですが、640px以下の場合には、以下の問題が発生しました。 ・640px以上の場合はhideされることなく表示されるようになったのですが、640px以下の場合にも.hideされずに開きっぱなし ・.menu-iconでhideのオン・オフが切り替えられたのですが、無反応になりました。 つまり、全体にjavascriptが全く聞いていない。640px以下の時のみjQueryを有効にするにはどうしたらいいのでしょうか？教えてください。 以上、よろしくおねがいします。

  • 自サーバに置いたWEBページから他のWEBページを操作するにはどうした

    自サーバに置いたWEBページから他のWEBページを操作するにはどうしたらいいでしょうか？ 例えばテスト的にYahooのページを用いたいと思います。 http://www.happy2-island.com/vbs/cafe02/capter00701.shtml ここにあるようなことをWEBページ上から実現させたいのですが、ここで紹介されているのはIEのみでしか有効ではないようですね 他のブラウザではやりようがないのでしょうか？ もし、上記のようなことが実現できる場合javascriptのライブラリを作るかHTML上に書いてしまうほうとどちらがいいのでしょうか？ あとｊQueryでは実現できないのでしょうか？ 本を読んでみたのですがそういった記述が一切ありませんでした・・・

  • JavascriptとJqueryを混在し記述

    JavascriptとJqueryが混在したスクリプトファイル（.js)の書き方について質問です。 Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが 気になるので質問させてください。 通常、javascriptの書き方として、スクリプトやその関数定義を１つのjsファイルに書くと思いますが、 Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後（要素を特定できるようにするため）に実行したい場合の スクリプトを $(function(){ //Jquryや通常のjavascript }); の中にこのように書けばいいって話ですよね？ つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね？ ===== script.js ====== //(1)Javaスクリプト　←jsファイルが読み込まれたら実行するスクリプト //関数定義 function test(){ //Javaスクリプト } //(2)Jquery　←ページが全て読み込まれた後で実行するスクリプト $(function(){ //Jqueryスクリプト //Javaスクリプト }); 初歩的なことかもしれませんがすいません。

  • 「～」の前後に改行を入れたい

    ページの中に「～」が会った場合にその前後に改行(<br />)を入れたいです。 javascriptかjqueryでどうにか実現できないでしょうか？

  • netscapeでもinnerTextやinnnerHTMLと同様にテーブルのセル内の値を設定する方法

    テーブル内の特定のセルに文字列を設定するために、 (1)　ブラウザの種別を識別し、 (2)　IEの場合には、 　　mytable.rows[0].cells[0].innerText = "abcdef"; 　　その他のブラウザの場合には、 　　mytable.rows[0].cells[0].innerHTML = "abcdef"; としています。 注　mytable：　テーブルに付与したid 　　abcdef：　セルに設定される文字列の一例 しかし、ネットスケープの場合には、 innerTextとinnerHTMLとの何れもサポートされていないため、困っています。 ネットスケープでも、上記処理と同等の処理を実現する方法 を教えて下さい。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する