omachizura

ホームページの基本的なことからスタートし、WEBアプリの開発までできるスキルを紹介します。


javascriptでtableタグの中のコントロールにアクセスする

javascriptでtableタグの中のコントロールにアクセスする方法を紹介します。

例えばrepeaterで明細の一覧を出力した場合、各行のコントロールのIDは動的に出力されるため、document.getElementById('コントロールID')のようにIDでコントロールを取得することができません。

以下のようなhtmlがあったときに、テーブルのコントロールから子の要素をたどっていく方法があります。

html

<table id="tbl">
  <thead>
    <tr>
      <th>コード</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="1" id="???"></td>
      <td><input type="text" value="社員A" id="???"></td>
    </tr>
    <tr>
      <td><input type="text" value="2" id="???"></td>
      <td><input type="text" value="社員B" id="???"></td>
    </tr>
  </tbody>
</table>

javascript

var tbl = getElementById("tbl"); //テーブルのコントロールを取得
for(var i = 0; i < tbl.children[1].children.length; i++){
  //tbl.children[0]はthead tbl.children[1]はtbody
  var row = tbl.children[1].children[i]; //i番目のtrを取得
  console.log(row.cells[0].getElementsByTagName("input")[0].value); //各行のコードのコントロールの値を出力
  console.log(row.cells[1].getElementsByTagName("input")[0].value); //各行の名称のコントロールの値を出力
}

tableのchildrenはthead,tbodyになります。

htmlでthead,tbodyを省略した場合でもchildrenは必要です。(ブラウザによって解釈が異なるかもしれません)

html

<table id="tbl">
  <tr>
    <th>コード</th>
    <th>名称</th>
  </tr>
  <tr>
    <td><input type="text" value="1" id="???"></td>
    <td><input type="text" value="社員A" id="???"></td>
  </tr>
  <tr>
    <td><input type="text" value="2" id="???"></td>
    <td><input type="text" value="社員B" id="???"></td>
  </tr>
</table>

javascript

var tbl = getElementById("tbl"); //テーブルのコントロールを取得
for(var i = 1; i < tbl.children[0].children.length; i++){ //i=0はヘッダ
  var row = tbl.children[0].children[i]; //tbl.children[0]がthead,tbodyの部分です
  console.log(row.cells[0].getElementsByTagName("input")[0].value); //各行のコードのコントロールの値を出力
  console.log(row.cells[1].getElementsByTagName("input")[0].value); //各行の名称のコントロールの値を出力
}





  • asp.netの基本・aspとの違い

    classic aspとasp.net(aspx)の違いやaspx.netの基本的な考え方ついて説明します。ここまでaspを用いてWEBアプリの基本を説明してきましたが、ここまでのサンプルコードを見て...


  • htmlサーバコントロールの基本

    asp.netのhtmlサーバコントロールの基本の基本的な考え方ついて説明します。htmlサーバコントロールを使えば、サーバ処理でhtmlの要素(コントロール)にアクセスできるようになります。フォーム...


  • webサーバコントロールの基本

    asp.netにはwebサーバコントロールというコントロールが用意されています。webサーバコントロールはhtmlのスタイルや属性を直接編集するわけではなく、サーバ処理ではフォームアプリのように、コン...


  • ポストバックの基本

    asp.netでは保持したいコントロールにrunat="server"属性を指定してsubmitすると、自動的に内部処理でコントロールの値を復元してくれます。基本的にasp.net...


  • イベントの基本と注意事項

    asp.netではsubmitコントロールにrunat="server"属性を指定してsubmitするようにすれば、サーバ処理ではフォームアプリと同じようにイベントのファンクション...


  • repeaterで表示・編集・登録処理 その1

    asp.netのWEBサーバコントロールのrepeaterコントロールを使用し、データの表示・編集・登録処理の流れの実装例を紹介します。具体的には、DBに登録されているデータをrepeaterコントロ...


  • repeaterで表示・編集・登録処理 その2

    aspxファイルに定義したrepeaterの中のコントロールのIDはサーバ処理で使うためのIDであって、レスポンスされるコントロールのIDではありません。なので、ID=txtNameのテキストボックス...


  • repeaterで出力時にjavascriptのイベントを定義する

    apsxファイルに詳細ボタンと、詳細画面を起動するjavascriptのファンクションを定義します。onclick属性(イベント)をaspxに定義してしまうと、引数で必要な行事の情報がわからないので、...


  • repeaterで出力したコントロールにjavascriptでアクセスする

    asp.netのrepeaterで動的に出力したコントロールにjavascriptでアクセスする方法を紹介します。javascriptで要素にアクセスする場合はgetElementById(取得したい...


  • javascriptでtableタグの中のコントロールにアクセスする

    例えばrepeaterで明細の一覧を出力した場合、各行のコントロールのIDは動的に出力されるため、document.getElementById('コントロールID')のようにID...