asp.netのrepeaterで出力したコントロールにjavascriptでアクセスする
ASP.NET
のRepeater
で動的に出力したコントロールにjavascript
でアクセスする方法を紹介します。
例として、登録ボタン押下時に、選手名のテキストボックスが未入力の場合はアラートを表示するようにします。
選手名 | 国籍 | 怪我 | キャプテン | |
---|---|---|---|---|
まずはapsx
ファイルに更新ボタン押下時に必須チェックをするjavascript
のファンクションを定義します。
<script>
//更新前の入力チェックを行います
function checkMeisai(){
return true;
}
</script>
<!--javascriptでアクセスするためにtable要素にidを付与します-->
<table id="tblMeisai">
<thead>
<tr>
<td></td>
<td>選手名</td>
<td>国籍</td>
<td>怪我</td>
<td>キャプテン</td>
</tr>
</thead>
<tbody>
<asp:Repeater ID="repeater1" runat="server">
<ItemTemplate>
<tr>
<td><input type="button" id="btnDetail" value="詳細" runat="server" /></td>
<td><input type="text" id="txtName" runat="server" /></td>
<td><select id="selCountry" runat="server"></select></td>
<td><input type="checkbox" id="chkInjure" runat="server" /></td>
<td><input type="radio" id="rdoCap" runat="server" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
<input type="button" value="更新" onclick="return checkMeisai();">
onclick
はreturn
の値がtrue
の場合のみ処理を継続します。
javascriptでtableの要素にアクセスする
javascriptで要素にアクセスする場合はgetElementById('取得したいコントロールのID')
でアクセスすることが多いですが、Repeater
で動的に出力した場合はコントロールのIDがどのような値になるのかわからないので、getElementsByTagName()
でアクセスします。
最近のブラウザであればquerySelector
などを使用したほうが簡単に取得できますが、古いブラウザにも対応するためにgetElementsByTagName
を例として紹介しています。
html
の要素全体に対してgetElementsByTagName()
を行うと、取得したいコントロール以外のコントロールも取得してしまうので、以下のようにtd
要素まで特定してからgetElementsByTagName()
でアクセスします。
//更新前の入力チェックを行います
function checkMeisai(){
//table要素を取得します
var tbl = document.getElementById('tblMeisai');
var row; //tr要素を格納する
var cell; //td要素を格納する
//tbl.childrenはthead,tbody
//tbl.children[1].childrenがtbodyのtr
for(var i = 0; i < tbl.children[1].children.length; i++) {
row = tbl.children[1].children[i]; //trを格納する
cell = row.cells[1]; //選手名テキストボックスのあるtdを格納する(左から2番めのtd)
//cellの中でinputタグの要素を検索する
if(cell.getElementsByTagName('input')[0].value === ''){
alert('選手名を入力してください。');
return false;
}
}
return true;
}