javascriptの質問です

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

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2014/11/04 00:01:43
  • 終了:2014/11/04 19:38:42

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4562ベストアンサー獲得回数19062014/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)
他5件のコメントを見る
id:a-kuma3

jsFiddle の方を、ちょっと修正しました。
http://jsfiddle.net/th30o3o8/1/

変更箇所は、以下の通り。

  • 左側のパネルで、スクリプトを埋め込む位置を "No wrap - in <head>" に変更
  • filterTableListener を設定するところを、window.onload の中に移動
  • select の onchange は、タグの属性で書くのではなく、javascript で設定するように変更
2014/11/04 19:11:48
id:takanii

ありがとうございました!

2014/11/04 19:38:55

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません