クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。例えば下記Tableの"き"という文字が入ったセルをクリックすると列番号:2 行番号:3 という番号を取得したいのです。１２３４あいうえおかきくけこさしすせそな onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の列数、行数を取得する事は可能でしょうか。宜しくお願いします。

クリックされた罫表セルの行番号、列番号を取得するには

解決済

質問者：take_july
質問日時：2008/08/14 14:16
回答数：3件

クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。

例えば　下記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のセルをクリックした時の
列数、行数を取得する事は可能でしょうか。

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2008/08/14 15:56

たとえばこんな感じでsiblingなノードを数えてみるとか・・・

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
なるほどです。
選択したセルをセル結合したいとか考えていたので、
とっても助かりました。

通報する

お礼日時：2008/08/15 17:09

No.3

回答者： taloo
回答日時：2008/08/14 23:57

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　という番号を取得したいのです。
列と行の数え方が逆では？

- 0
- 件

通報する

No.2

回答者： steel_gray
回答日時：2008/08/14 17:39

TDにはcellIndex、TRにはrowIndexとsectionRowIndexというプロパティがあって、

桁番号、表全体中の行番号、所属セクション(theadやtbody)中の行番号がわかります。

http://www.doraneko.org/misc/dom10/19981001/leve …
http://www.doraneko.org/misc/dom10/19981001/leve …

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>