動的にコントロール配列のインデックスを取得する

2005/10/06

関数オブジェクト、クラスを使用

サンプルテーブル
リスト メッセージ
  function addRow() {
    var table = document.getElementById("SampleTable");
    var row   = table.insertRow(table.rows.length);
    row.insertCell(0).innerHTML = "<select name='numbers'>"
                                +    "<option value='1'>1"
                                +    "<option value='2'>2"
                                +    "<option value='3'>3"
                                + "</select>";
    row.insertCell(1).innerHTML = "<input type='text' name='message' size='16em' />";
    refleshSelectboxEvent();
  }

  function deleteRow() {
    var table    = document.getElementById("SampleTable");
    var delIndex = table.rows.length-1;
    if (delIndex > 0) {
      table.deleteRow(delIndex);
    }
  }

  function changeSelectbox(index, code) {
    var txt = document.getElementsByName("message")[index];
    txt.value = code + " が選択されました";
  }
  
  function changeSelectboxListener(index) {
    var handler= "changeSelectbox(" + index + ",this.value)"
    this.changeSelectbox = new Function(handler);
  }
  
  function refleshSelectboxEvent() {
    var selectboxies = document.getElementsByName("numbers");
    for (var i=0; i<selectboxies.length; i++) {
      var listener = new changeSelectboxListener(i);
      selectboxies[i].onchange = listener.changeSelectbox;
    }
  }