javascriptの質問です

example1とexample2のセレクトボックスを選択して範囲を選択したら、tableの一列目で該当する行だけを表示して欲しいのですが、どのようにjavascriptを組めばいいでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/12 17:31:16
  • 終了:2013/09/12 22:21:03
id:takanii
<html><body>
<select name="example1">
<option value="1">1から</option>
<option value="2">2から</option>
<option value="3">3から</option>
<option value="4">4から</option>
</select>
<select name="example2">
<option value="1">1まで</option>
<option value="2">2まで</option>
<option value="3">3まで</option>
<option value="4">4まで</option>
</select>
<TABLE>
 <tr>
 <td>1</td>
<td>hoge</td>
 </tr>
 <tr>
 <td>1</td>
<td>hoge</td>
 </tr>
 <tr>
 <td>2</td>
<td>hoge</td>
 </tr>
 <tr>
 <td>3</td>
<td>hoge</td>
 </tr>
 <tr>
<td>3</td>
<td>hoge</td>
</tr>
<tr>
<td>4</td>
<td>hoge</td>
</tr>
</TABLE></body></html>

ベストアンサー

id:rikuba No.1

rikuba回答回数26ベストアンサー獲得回数122013/09/12 20:06:15

ポイント300pt

サンプル:JS Bin - Collaborative JavaScript Debugging

主要なコードを抜粋すると以下の通りです。
便宜上、select要素にid属性とonchange属性を付加しています。

<select name="example1" id="example1" onchange="filterTableListener.handleEvent(event);">
<option value="1">1から</option>
<option value="2">2から</option>
<option value="3">3から</option>
<option value="4">4から</option>
</select>
<select name="example2" id="example2" onchange="filterTableListener.handleEvent(event);">
<option value="1">1まで</option>
<option value="2">2まで</option>
<option value="3">3まで</option>
<option value="4" selected>4まで</option>
</select>

<!-- table -->

<script>
var filterTableListener = {
    table: document.getElementsByTagName('table')[0],
    select1: document.getElementById('example1'),
    select2: document.getElementById('example2'),

    min: 0,
    max: 0,

    // 最小値と最大値を2つのselect要素から取得します
    getLimits: function () {
        var min = Number(this.select1.value);
        var max = Number(this.select2.value);
        if (min < max) {
            this.min = min;
            this.max = max;
        } else {
            this.min = max;
            this.max = min;
        }
    },

    // select要素が変更されたときに呼び出されます
    handleEvent: function (e) {
        this.getLimits();
        this.filterTable();
    },

    // this.tableの各行について、表示・非表示を設定します
    filterTable: function () {
        var rows = this.table.rows;
        for (var i = 0, l = rows.length; i < l; ++i) {
            rows[i].style.display = this.filterRow(rows[i]) ? '' : 'none';
        }
    },

    // 引数のtr要素が表示すべき要素かどうかを判断します
    filterRow: function (tr) {
        var n = Number(tr.cells[0].firstChild.nodeValue);
        return this.min <= n && n <= this.max;
    }
};
</script>

その他の回答(0件)

id:rikuba No.1

rikuba回答回数26ベストアンサー獲得回数122013/09/12 20:06:15ここでベストアンサー

ポイント300pt

サンプル:JS Bin - Collaborative JavaScript Debugging

主要なコードを抜粋すると以下の通りです。
便宜上、select要素にid属性とonchange属性を付加しています。

<select name="example1" id="example1" onchange="filterTableListener.handleEvent(event);">
<option value="1">1から</option>
<option value="2">2から</option>
<option value="3">3から</option>
<option value="4">4から</option>
</select>
<select name="example2" id="example2" onchange="filterTableListener.handleEvent(event);">
<option value="1">1まで</option>
<option value="2">2まで</option>
<option value="3">3まで</option>
<option value="4" selected>4まで</option>
</select>

<!-- table -->

<script>
var filterTableListener = {
    table: document.getElementsByTagName('table')[0],
    select1: document.getElementById('example1'),
    select2: document.getElementById('example2'),

    min: 0,
    max: 0,

    // 最小値と最大値を2つのselect要素から取得します
    getLimits: function () {
        var min = Number(this.select1.value);
        var max = Number(this.select2.value);
        if (min < max) {
            this.min = min;
            this.max = max;
        } else {
            this.min = max;
            this.max = min;
        }
    },

    // select要素が変更されたときに呼び出されます
    handleEvent: function (e) {
        this.getLimits();
        this.filterTable();
    },

    // this.tableの各行について、表示・非表示を設定します
    filterTable: function () {
        var rows = this.table.rows;
        for (var i = 0, l = rows.length; i < l; ++i) {
            rows[i].style.display = this.filterRow(rows[i]) ? '' : 'none';
        }
    },

    // 引数のtr要素が表示すべき要素かどうかを判断します
    filterRow: function (tr) {
        var n = Number(tr.cells[0].firstChild.nodeValue);
        return this.min <= n && n <= this.max;
    }
};
</script>

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

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

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

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

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