- ベストアンサー
クリックされた罫表セルの行番号、列番号を取得するには
クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば 下記Tableの"き"という文字が入ったセルをクリックすると 列番号:2 行番号:3 という番号を取得したいのです。 <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の 列数、行数を取得する事は可能でしょうか。 宜しくお願いします。
- take_july
- お礼率54% (88/162)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
たとえばこんな感じでsiblingなノードを数えてみるとか・・・ <script> window.onload=function(){ var t0=document.getElementById("t0"); var tds=t0.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].onclick=function(){ var n=this.previousSibling; var col=1; while(n){ if(n.nodeName=="TD")col++; n=n.previousSibling; } var n=this.parentNode.previousSibling; var row=1; while(n){ if(n.nodeName=="TR") row++; n=n.previousSibling; } alert("列番号:"+col.toString()+" 行番号:"+row.toString()) } } } </script> <table id="t0"> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr><td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table>
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
colspan、rowspanは考慮してません。 クロージャのメモリリークチェックはしてません。 複数のtbody、th、tdの考慮はしてません。（1つ目のtbodyのセル全てに適用します） 正攻法（？）はNo.1だと思います。 <script> onload=function(){ var tbl=document.getElementsByTagName('table')[0].getElementsByTagName('tbody')[0]; for(var i=0,tr,trs=tbl.getElementsByTagName('tr');tr=trs[i];i++){ for(var j=0,td;td=tr.childNodes[j];j++){ td.onclick=GetCell(i+1,j+1); } } tbl=trs=null; function GetCell(r,d){ return function(){ TableClick(this, r,d); }; } delete GetCell; }; function TableClick(e, row, col){// eはエレメント自身 alert(' 行番号: '+row+', 列番号: '+col); } </script> <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr><td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> > 例えば 下記Tableの"き"という文字が入ったセルをクリックすると > 列番号:2 行番号:3 という番号を取得したいのです。 列と行の数え方が逆では？
- steel_gray
- ベストアンサー率66% (1052/1578)
TDにはcellIndex、TRにはrowIndexとsectionRowIndexというプロパティがあって、 桁番号、表全体中の行番号、所属セクション(theadやtbody)中の行番号がわかります。 http://www.doraneko.org/misc/dom10/19981001/level-one-html.html#ID-6986576 http://www.doraneko.org/misc/dom10/19981001/level-one-html.html#ID-82915075 colspanやrowspanでセルが結合された表だと#1さんのように数えるしかないですが。 以下、取得例。(tbody内の行番号の表示です) クリックされたオブジェクトから親にさかのぼってTDやTRを見つけています。 (TDのonclickで関数を呼ぶならTDのparentNodeがTRになります。) <html> <head> <title></title> <script type="text/javascript"> document.onclick=function(e){ if(! e) e=window.event; var S=e.srcElement||e.target; var TD=null; var TR=null; while(S){ if(S.nodeName=='TD') TD=S; if(S.nodeName=='TR') TR=S; S=S.parentNode; } if(! TD) return; alert('行:'+(TR.sectionRowIndex+1)+' 列:'+(TD.cellIndex+1)); } </script> </head> <body> <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr><td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> </body> </html>
お礼
ありがとうございます。 なるほどです。 選択したセルをセル結合したいとか考えていたので、 とっても助かりました。