2012-03-13 16 views
1

私はHTMLテーブルがあるjspページを持っています。テーブルの内容は、xmlファイルを読み取った後にと動的に入力されたになります。 xmlファイルに存在するデータによっては、テーブル内の行数が2から10まで変化することがあります。今度は、チェックボックスがhtmlテーブルに表示されます。 チェックボックスのIDも動的にという名前です。さて、表示されているチェックボックスのすべてのIDに依存するjavascriptコードを書く必要があります。テーブルに表示されているチェックボックスのすべてのIDをJavaScriptコードに動的に渡す方法ページに動的に表示されるチェックボックスのIDを取得する方法

PS:私は間違っている場合、私はこのアプローチを考えています。 チェックボックスのIDを保持する空の配列を宣言します。 forループを使用してテーブルの各行を動的に作成するとき、配列にチェックボックスのIDを追加します。さて、私はこの配列をjavascriptで使うことを考えています。

javascriptでこの配列にアクセスできますか?もしそうなら、この配列をjavascriptブロックに渡すには?このjavascriptコードをjspに配置する場所に制限があります(チェックボックスのIDが配列に追加されるコードブロックの前後)。私はこの種のものに比較的新しい。 Plsは、ページの読み込み後に利用可能です、あなたはこの(プレーンジャバスクリプト)を行うことができます

+0

var table = document.getElementById('dataTable'); //OR if we assert there's only 1 table //var table = document.getElementsByTagName('table')[0]; var tableInputTags = table.getElementsByTagName("input"); var checkboxArray= []; for (var i=0; i<tableInputTags.length; i++) { if(tableInputTags[i].type=="checkbox") { checkboxArray.push(tableInputTags[i].id); } } //continue doing something with the //array of dynamically created checkboxes... 
使用のjQueryにそれぞれ加えます。次に、IDが 'container'のコンテナ内にこれらのチェックボックスがあるとします。 $( '#container input [type = checkbox]') – mshsayem

答えて

1

私はあなたには2つの可能性があると分かっています。あなたは

  1. は、サーバー側forループの反復ごとjavascript配列にあるチェックボックスのIDを追加することができます。したがって、ページの先頭に空のjs配列を宣言し、各チェックボックスにscriptブロックを追加します。このブロックでは、IDを<yourarray>.push("<yourid>")で配列にプッシュします。このソリューションは、(各<script>ブロックはしばらくの間、レンダリング処理を停止し、あなたはいくつかの場所でコードを「種をまく」以降)本当にパフォーマンスではなく、技術的に取り組んでいる - DOM ready(またはオンロード)でそう

  2. あなたが見たイベントDOMコレクションのを取得し、idを取得して配列にプッシュします。

    var ids = [], 
        cbx = document.querySelectorAll('input[type="checkbox"]'); 
    
    for (i = 0, l = cbx.length; i < l; i++) { 
         ids.push(cbx[i].id); 
    } 
    
    console.log(ids); 
    

フィドル:http://jsfiddle.net/G44hH/1/ - もちろん、あなたができれば使用する場合は、このソリューション(およびない最初の1)方が良いでしょう

+0

興味深い[queryselector](http://caniuse.com/queryselector)と[console](http://patik.com/blog)/complete-cross-browser-console-log /) - 私はもっと安全でコードはそれほど多くないと言っています。 – mplungjan

+0

はい、私は絶対に同意します(IE8以降は 'querySelectorAll()'がサポートされています)。異なるアプローチを提示するだけです。コンソールはデバッグ目的のためだけに置かれます – fcalderan

0

は、すべてのチェックボックスを想定すると、このアプローチを実装する上で役立ちます。

var checks=[]; 
window.onload=function() { 
    var inputs = document.getElemementsByTagName("input"); 
    for (var i=0, n=inputs.name;i<n;i++) { 
    if (inputs[i].type=="checkbox") checks.push(inputs[i].id); 
    } 
} 
0

はあなたのTR内のいくつかのTRを持っている#table idを持つテーブルがあるとしTDのチェックボックスがあります。あなたは以下のjqueryのことでそれを行うことができます。

$('#table tr').each(function() { 
alert($(this).find('input:checkbox').attr('id')); 
}); 

しかし、私はあなたが、削除、編集などのようなものをやっている中で、あなたが特定のTdとに関連して、チェックボックスのidを必要とするすべてのチェックボックスのIDを格納する必要がないと思います

あなたがしたいことを明確に指定できる場合は、適切なコードを送信できます。

0

すべてchecckboxesのクラス属性を追加し、その後にjqueryのを使用しますこれらのチェックボックスをクラスごとに選択します。

jqueryセレクタはこれらのチェックボックスの配列を返します。必要に応じてこの配列を使用できます。 このようなものです。

<input type=checkbox class ="box"/> 

var arr = []; 

arr = $(".box"); 
2

はい同様mplungjanの答えとあなたは要素の種類を検索することができ、その後、あなたはそれをIDを与えている場合は、id(であなたのテーブルのためのあなたのケースの検索でそう

内のチェックボックス要素を取得するためにさらに掘り下げます)またはタグ名(「テーブル」[0]が最初で唯一のテーブルがある場合)によって、テーブル内のチェックボックス要素を検索して、アレイ

+0

この方法もIE7以下では機能しません。しかし、これは簡単なアプローチであるようです。小さなタイポがif条件にあります(私たちは入力[i]の代わりにtableInputTags [i]を使用します) –

+0

@SuryaChandraタイポスポットのおかげで - 固定されています –