- ベストアンサー
クリックされた罫表セルの行番号、列番号を取得するには
クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば 下記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/2281)
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>
関連するQ&A
- 罫表のセル結合
AJAXの勉強をしています。 Htmlに表示されている罫表の選んだセルをセル結合するような処理を 作りたいのですが、可能でしょうか。 DOMを使用してセルの削除等は出来たのですが、セル結合を行う事が出来ないのです。 function joinSpan( ) { // 出力先のトップ要素となるtable要素 var table = document.getElementById("result"); //とりあえずセル削除してみる。 var child = table.childNodes; var child2 = child[0].childNodes; child[0].removeChild(child2[1]); } ↓対象となるテーブル <table id="result"> <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> 何か良い方法がありましたら、教えて頂ければと思います。
- ベストアンサー
- JavaScript
- 罫表内の文字を選択された場合に変更するには
罫表内の一部の文字を選択し、"色変更"ボタンを押した場合に 選択した文字の色を変更する事は出来ますでしょうか。 例えば 下記Tableの右下のセルの"にぬね"という文字を選択し、 ボタンを押すと選択した文字の色が赤に変わるというような事がしたいのです。 <table> <thead><tr><th>１</th><th>２< /th><th>３</th><th>４</th></tr>< /thead> <tbody> <tr td>あいうえお</td><td>かきくけこ</td></tr> <tr><td>さしすせそ</td><td>なにぬねの</td></tr> </tbody> </table> 何か方法ありますでしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- 編集ボタンクリックと同時に社員番号を渡したい
お世話になります。 データベースに登録している、社員情報を呼び出してJSPで一覧表示してます。 その際、テーブル一行単位 に編集ボタンを配置してます。 で、社員情報を編集の際、行に配置された編集ボタンをクリックしてサーブレットに社員番号を渡したいのですが上手くできません。 解決策を教えてください。よろしくお願いします。 <div id="content"> <h1>社員一覧</h1> <form method="post" action="EmployeeCall"> <table> <thead> <tr> <th>店舗名</th> <th>部署</th> <th>社員番号</th> <th>社員名前</th> <th>/</th> </tr> </thead> <% if(employeeList != null) { for(EmployeeDTO employee : employeeList) { %> <tbody> <tr> <td><%=employee.getAbbreviatedStoreName() %></td> <td><%=employee.getDepartmenName() %></td> <td><%=employee.getEmployeeID() %><input type="hidden" name="employeeID" value="<%=employee.getEmployeeID() %>" /></td> <td><%=employee.getLastName() + employee.getFirstName() %></td> <td><input type="submit" class="editingProcess" name="edit" value="編集"/></td> </tr> </tbody> <% } } %> </table> </form> </div>
- ベストアンサー
- Java
- 2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- JSFタグ<h:dataTable>でヘッダのcolspan
お世話になります。 JSFの<h:dataTable>で、ヘッダをcolspanで結合する方法、さらにヘッダを2行にしたいのですが、可能でしょうか？ 以下のようなhtmlを生成したいのです。 <table border="1"> <thead> <tr> <th colspan="2" scope="colgroup">May</th> <th colspan="2" scope="colgroup">June</th> </tr> <tr> <th>name</th> <th>flag</th> <th>name</th> <th>flag</th> </tr> </thead> <tbody> <tr> <td>5A</td> <td>B</td> <td>6A</td> <td>D</td> </tr> <tr> <td>7B</td> <td>B</td> </tr> </tbody> </table> テーブル要素をカラム単位<h:column>で管理するので、このようなことはできないような気がしていますが、なにか方法ありませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- Java
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- JQueryでクリックされた文字を取得したい
テーブルがあり、連番が 1 2 3 と振ってあります。 その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか？ 例）1をクリック → 1 を取得。 <table border="1" width="150"> <tbody> <tr> <td width="50"><a href="#">1</a></td> <td>田中</td> </tr> <tr> <td><a href="#">2</a></td> <td>佐藤</td> </tr> <tr> <td><a href="#">3</a></td> <td>鈴木</td> </tr> </tbody> </table> ご存知の方教えて下さい。
- ベストアンサー
- JavaScript
- 表のhtmlを入力すると、表の上部に数行～十数行分の余白ができてします。
ブログを長らくやっていますが、htmlは超初心者です。 「html 表」と検索して、いくつかのhtmlをコピーしてみました。 それを、書いた文章のあとにペーストすると、必ず、文章と表の間に、タイトルに書いたよう、かなりのスペースができてしまします。 たとえば、このようなhtmlをペーストしたのですが… <Table Border> <Tr> <Td> ここに文字やデータを入れこみます。<Br> テーブルタグはこれが基本です。 </Td> </Tr> </Table> または <Table Border> <Tr> <Td>1列1行</Td><Td>2列1行</Td><Td>3列1行</Td> </Tr> <Tr> <Td>1列2行</Td><Td>2列2行</Td><Td>3列2行</Td> </Tr> <Tr> <Td>1列3行</Td><Td>2列3行</Td><Td>3列3行</Td> </Tr> </Table> 本当に初心者のため、もしかしたらとんでもない間違いをしているのかもしれませんが… よろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルの行操作について
下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか？ <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 なるほどです。 選択したセルをセル結合したいとか考えていたので、 とっても助かりました。