takanii回答ポイント 500pt

javascriptの質問です

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

a-kuma32014/11/04 00:51:18
満足500pt
こんな感じで、どうでしょう。
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)
スター
- 7件のコメントを見る
- takanii 2014/11/04 02:29:07
  
  http://ideone.com/UPi8ri　こちらはPHPで組んでもらったものですが　これと同じものをjavascriptで組みたいのです
  htmlタグ内のoptionタグを自動作成して欲しいのです
  
   スター
- a-kuma3 2014/11/04 09:02:06
  
  htmlタグ内のoptionタグを自動作成して欲しいのです
  回答に追記しました。
  
  スター
- takanii 2014/11/04 16:49:23
  
  http://jsbin.com/vekayofoyi/1/edit?html,js,output
  回数のところがNANまでと出てしまいます
  どうすればよろしいでしょうか？
  
  スター
- a-kuma3 2014/11/04 17:55:41
  数字以外も入る可能性があるのですね。
  少し、修正しました。
  http://jsbin.com/qumojuweca/2/edit?html,js,output
  var num = parseInt(cell.innerHTML); if (! map[num]) { map[num] = num; }
  上記の部分を、以下のように変更しています。
  var num = parseInt(cell.innerHTML); if (! isNaN(num) && ! map[num]) { map[num] = num; }
  
  スター
- takanii 2014/11/04 18:22:59
  
  すみません　こちらが動かないのは何故なのでしょうか？
  http://jsfiddle.net/th30o3o8/
  
  スター
- a-kuma3 2014/11/04 19:11:48
  jsFiddle の方を、ちょっと修正しました。
  http://jsfiddle.net/th30o3o8/1/
  
  変更箇所は、以下の通り。
  左側のパネルで、スクリプトを埋め込む位置を "No wrap - in <head>" に変更
  filterTableListener を設定するところを、window.onload の中に移動
  select の onchange は、タグの属性で書くのではなく、javascript で設定するように変更
  
   スター
- takanii 2014/11/04 19:38:55
  
  ありがとうございました！
  
  スター

javascriptの質問です

ベストアンサー

a-kuma32014/11/04 00:51:18
満足500pt

takanii 2014/11/04 02:29:07

a-kuma3 2014/11/04 09:02:06

takanii 2014/11/04 16:49:23

a-kuma3 2014/11/04 17:55:41

takanii 2014/11/04 18:22:59

a-kuma3 2014/11/04 19:11:48

takanii 2014/11/04 19:38:55

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

javascriptの質問です

ベストアンサー

a-kuma32014/11/04 00:51:18 満足500pt

takanii 2014/11/04 02:29:07

a-kuma3 2014/11/04 09:02:06

takanii 2014/11/04 16:49:23

a-kuma3 2014/11/04 17:55:41

takanii 2014/11/04 18:22:59

a-kuma3 2014/11/04 19:11:48

takanii 2014/11/04 19:38:55

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

a-kuma32014/11/04 00:51:18
満足500pt