人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問です
http://jsbin.com/dumidoxufu/1/edit?html,css,js,output
こちらのようなtableが並んだページが沢山あります
各ページ表の回数の多さが違うのですが 自動で回数を取得し option タグを作成することはできないでしょうか?
以前こちらで phpでは作っていただいたのですが こちらです http://q.hatena.ne.jp/1379104437
特別なソフトを入れずブラウザだけで動かしたいのでなんとかjavascriptでお願いします

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●500ポイント ベストアンサー

こんな感じで、どうでしょう。
http://jsbin.com/budipolifu/1/edit?html,css,js,output

id="example2" の select から、option の selected を外して、javascript の後半に、以下のようなコードを追加してます。

window.onload = function() {
 var tbl = document.getElementsByTagName("TABLE")[0];
 var min = 999999;
 var max = -1;
 for (var i = 0 ; i < tbl.rows.length; ++i) {
 var cell = tbl.rows[i].cells[0];
 var num = parseInt(cell.innerHTML);
 if (num > max) {
 max = num;
 }
 if (num < min) {
 min = num;
 }
 }
 function select_option(id, idx) {
 var sel = document.getElementById(id);
 sel.options[idx - 1].selected = true;
 }
 select_option("example1", min);
 select_option("example2", max);
};

数字が小さい方の select も選ぶようにしました(あんまり、意味ない)。
TABLE には ID などの目印が付いてないので、getElementsByTagName() で取得していますが、ページに複数の TABLE がある場合には、ID 属性を指定して getElementById() で取得するように変えてください。




追記です。

htmlタグ内のoptionタグを自動作成して欲しいのです

コードを書き直しました。
http://jsbin.com/lebizizeku/3/edit?html,js,output

select タグの中身を空にして、window.onload の処理を、以下のように変えています。

window.onload = function() {
 var tbl = document.getElementsByTagName("TABLE")[0];
 var map = [];
 for (var i = 0 ; i < tbl.rows.length ; ++i) {
 var cell = tbl.rows[i].cells[0];
 var num = parseInt(cell.innerHTML);
 if (! map[num]) {
 map[num] = num;
 }
 }
 var arr = [];
 for (var j in map) {
 arr.push(map[j]);
 }
 arr.sort(function(a,b){return a-b;});
 function create_option(id, arr, is_begin) {
 var sel = document.getElementById(id);
 for (var i in arr) {
 var opt = document.createElement("OPTION");
 opt.value = arr[i];
 opt.innerHTML = arr[i] + (is_begin ? "から" : "まで");
 sel.appendChild(opt);
 }
 if (is_begin) {
 sel.firstChild.selected = true;
 } else {
 sel.lastChild.selected = true;
 }
 }
 create_option("example1", arr, true);
 create_option("example2", arr, false);
};

テーブルの一部を変えてます(並べ替えのテスト)。

データの並べ替えの辺りがくどいことになってますけど、jsbin.com で Array.sort() を呼ぶと、文字列として比較されてしまったので。
普通なら、以下のような書き方で良いはずです。

 arr.sort();





追記です。

先の追記で、こんなことを書きました。

データの並べ替えの辺りがくどいことになってますけど、jsbin.com で Array.sort() を呼ぶと、文字列として比較されてしまったので。
普通なら、以下のような書き方で良いはずです。

 arr.sort();

ぼくが分かっていなかっただけで、正しい動作です。
sort メソッドには、比較関数を渡してあげなきゃいけません。

compareFunction (比較関数) が与えられなかった場合、要素はそれぞれの文字列に変換したものを比較して辞書 (あるいは電話帳。数的でない) 順にソートされます。

Array.sort - JavaScript | MDN

sortFunction
Optional. 要素の順序を決定するために使用する関数の名前を指定します。 省略した場合、要素は ASCII 文字の昇順で並べ替えられます。

sort メソッド (Array) (JavaScript)

takaniiさんのコメント
http://ideone.com/UPi8ri こちらはPHPで組んでもらったものですが これと同じものをjavascriptで組みたいのです htmlタグ内のoptionタグを自動作成して欲しいのです

a-kuma3さんのコメント
>> htmlタグ内のoptionタグを自動作成して欲しいのです << 回答に追記しました。

takaniiさんのコメント
http://jsbin.com/vekayofoyi/1/edit?html,js,output 回数のところがNANまでと出てしまいます どうすればよろしいでしょうか?

a-kuma3さんのコメント
数字以外も入る可能性があるのですね。 少し、修正しました。 http://jsbin.com/qumojuweca/2/edit?html,js,output >|javascript| var num = parseInt(cell.innerHTML); if (! map[num]) { map[num] = num; } ||< 上記の部分を、以下のように変更しています。 >|javascript| var num = parseInt(cell.innerHTML); if (! isNaN(num) && ! map[num]) { map[num] = num; } ||<

takaniiさんのコメント
すみません こちらが動かないのは何故なのでしょうか? http://jsfiddle.net/th30o3o8/

a-kuma3さんのコメント
jsFiddle の方を、ちょっと修正しました。 http://jsfiddle.net/th30o3o8/1/ 変更箇所は、以下の通り。 -左側のパネルで、スクリプトを埋め込む位置を "No wrap - in &lt;head&gt;" に変更 -filterTableListener を設定するところを、window.onload の中に移動 -select の onchange は、タグの属性で書くのではなく、javascript で設定するように変更

takaniiさんのコメント
ありがとうございました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ