• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:JavaScriptで、テーブルクリックした時の)

JavaScriptでテーブルクリック時に社員IDを取得する方法

このQ&Aのポイント
  • JavaScriptを使ってテーブルのセルをクリックした際に、クリックした行の社員IDを取得する方法について教えてください。
  • 現在、PHPを勉強中であり、JavaScriptの力を借りなければならない状況です。クリックしたセルの情報は取得できており、それを基に社員IDを取得したいです。
  • 既存のコードを改善するか、新しい方法で社員IDを取得する方法を教えていただけると助かります。

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

自分の行の先頭のセルの値を拾いたいということでよろしいですか? こんなかんじでどうでしょ? <script> try{ document.addEventListener ('click',function(e){clickfunc(e)},true); //基本 }catch(e){ document.attachEvent('onclick',function(e){clickfunc(e)}); //IE } function clickfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName=="TD"){ var uid=t.parentNode.firstChild.innerHTML; alert(uid); } } </script> <table> <thead> <tr><th>社員ID</th><th>社員名</th><th>住所</th></tr> </thead> <tbody> <tr><td>1</td><td>東京花子</td><td>港区~</td></tr> <tr><td>2</td><td>板橋亜希</td><td>板橋区~</td></tr> <tr><td>3</td><td>瀬田 南</td><td>世田谷区~</td></tr> </tbody> </table>

marin3200
質問者

お礼

補足で記述まちがいをしました。 header("Location: read.php?".SID);で開いても同じです。  の箇所はとりけします。 どうやら社員IDをDBから取得してSESSIONにいれているのですが、そこで変な感じにはいってしまっているようで、別問題のようです。 この質問に対しては解決しましたので一度クローズします。 本当にありがとうございました!! 大変たすかりました。

marin3200
質問者

補足

早速にありがとうございます! 新規に作成したA.phpにコピペして動作確認したら、動き的には100%希望どおりです。 ただ、困ったことに、このテーブルが実際に存在しているのは、index.phpからrequire ("read.php");でよばれて開いた画面内にあります。 firebugで確認すると、documentがindexになってしまっており、undefined とアラート表示されてしまいます。 header("Location: read.php?".SID);で開いても同じです。 こんなレベルですので、どうぞよろしくお願いいたします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Javascriptで動的なTableのButto

    http://scrap.php.xdomain.jp/javascript_table_control/ 上記サイトを参考に,内部にButtonがある表を動的に作成することができました. 次に,Buttonをクリックした際に特定のセルの値を取得したいと考えています. 試しに以下のコードを作成し,実行致しました. function clickedRow(obj) {  //obj は テーブル tr = obj.parentNode.parentNode; var ri = tr.sectionRowIndex; var table = document.getElementById('sample1_table'); alert(table.rows[ri].innerText); } 上記を実行するとクリックした行のすべての列の値を取得できました. クリックした行の,特定の列の値のみを取得するにはどうすればよいでしょうか? 何卒ご教授よろしくお願い致します.

  • クリック時、テーブルの行全体を色づけするには?

    テーブル上でクリックされたら、その行全体を色づけするようにしています。 一見問題なく動作するのですが、ボタンやアンカーなどが含まれたセルがあると、そこだけ色付けができません。 そのセルを一度もクリックしない間は良いのですが、一度でもクリックすると、その後は色づけされません。 セルの中身に関わらず、選択行全体が色づけできるようにするには、どうすればよいでしょうか? IE6での現象です。 ご回答よろしくお願いします。 【HTML部分】 <table> <tr onclick="rowsSelect()"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> <tr onclick="rowsSelect()"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> <tr onclick="rowsSelect()"> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td><input type="button" value="子画面" onclick="window.open();"></td> </tr> </table> 【JavaScript部分】 var selRow; function rowsSelect() { var r = event.srcElement.parentElement; if(selRow!=null){ selRow.style.backgroundColor="#FFFFFF"; } selRow=r; r.style.backgroundColor="#FFDAB3"; }

  • jquery input 要素取得

    失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できません ソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>

  • javascriptで指定するtrを削除した時に、IEとfirefoxで動作が異なる

    はじめて、投稿いたします。 現在、javascriptで指定した行を削除するような動作を作っているのですが、firefoxとIEで動作が異なってしまうため困っています。 ちなみに、firefoxでは、実現してほしい動作をしてくれるのですが、IEではうまく動作してくれません。 tableのtrが3つ以上ある場合は、指定した行が正常に削除します。 しかし、IEだと、trが2つの時には、1番目のtrを削除しようとすると、一緒に2番目のtrの中身が見えなくなってしまいます。 ちなみに、その中の情報が削除されたのかなと思い、alertで表示させるとどうやら削除はされておらず、表示しなくなってしまうようです。 どうすれば、firefoxとIEで、同じような動作をするようにできるのでしょうか? よろしくお願いします。 以下に、ソースを貼っておきます。 <html> <head> <script type="text/javascript"> <!-- function delete_tr(html_this) { var TR = html_this.parentNode.parentNode; TR.parentNode.deleteRow(TR.sectionRowIndex); var table = document.getElementById('test_table'); var tr_num; var td_num; for (tr_num = 0; tr_num < table.rows.length; tr_num++) { for (td_num = 0; td_num < table.rows[tr_num].cells.length; td_num++) { alert(table.rows[tr_num].cells[td_num].innerHTML); } } } --> </script> </head> <body> <h1>Hello World !!</h1> <table border="1" id="test_table"> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ bbbb ------</td> <td>------ cccc ------</td> </tr> <tr> <td> <input type="button" value="delete" onClick="delete_tr(this)" /> </td> <td style="display: none;">------ BBBB ------</td> <td>------ CCCC ------</td> </tr> <tr align="center"> <td colspan="3"> <input type="button" value="add"> </td> </tr> </table> </body> </html>

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

    クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば 下記Tableの"き"という文字が入ったセルをクリックすると 列番号:2 行番号:3 という番号を取得したいのです。 <table> <thead><tr><th>1</th><th>2</th><th>3</th><th>4</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のセルをクリックした時の 列数、行数を取得する事は可能でしょうか。 宜しくお願いします。

  • マウスクリックするたびにテーブルの行全体の背景を着色/着色解除

    1行目をクリックすると行全体(「1」か「あああ」か「東京」のセル)が 黄緑に着色され、もう1回クリックすと着色が解除されるようにするには どうしたらいいでしょうか? <table> <tr> <td>1</td> <td>あああ</td> <td>東京</td> </tr> <tr> <td>2</td> <td>いいい</td> <td>神奈川</td> </tr> <tr> <td>3</td> <td>ううう</td> <td>千葉</td> </tr> </table>

  • ツールチップにテーブル左端列の値を表示させる

    こんにちは。javaScript超初心者です。 現在、mySQLにクエリを投げた結果を表示するテーブルで、マウスオーバした行の左側の2列の値を、ツールチップでマウスポインタの付近に表示させることができないかと思案しています。 一応、以下のサンプル(実際のデータを単純化したものです)のようなコードを書いてみたのですが、みごとに動きません。自分なりにいろいろなサイトの情報などを調べてみたのですが、なにぶん先日javaScriptの勉強を始めたばかりなもので、どこがどういけないのか見当もつきません(恐らく、全面的に間違っているのだと思います)。 勉強を進めていけば、いずれは自分でわかるようになるのかもしれませんが、とりあえず近日中に実装する必要があるので、どなたかご助言をいただけないでしょうか。 ※ツールチップを表示させる方法がわからなかったので、とりあえずalertでの表示を試みています。 <html> <head> <title>左列の文字列をツールチップで表示</title> </head> <script type="text/javascript"> function tooltip_left(tid) { var rowid = "row_" + tid; //IDがtooltip_testのテーブルオブジェクトを取得 var table_ob = document.getElementById("tooltip_test"); //IDがrowidの行(オブジェクト??)を取得 var row_ob = document.getElementById(rowid); //上記の行が何行目か調べてrow_numに格納 var row_num = table_ob.row_ob.rows //left_textに該当行の左から1番目、2番目のテキストを格納 left_text = table_ob.rows[row_num].cells[0] + ":" + table_ob.rows[row_num].cells[1]; //ツールチップが良く分からないのでalertで表示してみる window.alert(left_text); } </script> <body> <table id="tooltip_test"> <tr> <th>商品ID</th><th>商品名</th><th>データ1</th><th>データ2</th><th>データ3</th> </tr> <tr id="3" onMouseOver="tooltip_left(3)"> <td>3</td><td>テスト</td><td>12:00</td><td>12</td><td>済</td> </tr> <tr id="515" onMouseOver="tooltip_left(515)"> <td>515</td><td>サンプル</td><td>12:00</td><td>12</td><td>済</td> </tr> <tr id="9" onMouseOver="tooltip_left(9)"> <td>9</td><td>ダミー</td><td>12:00</td><td>12</td><td>済</td> </tr> </table> </body> </html>

  • セルをドラッグで選択するときに、

    7×7のセルをドラッグで選択をするときに、選択できない場所を作りたいと思っているのですが、どのようにすればいいのでしょうか? ネット上にあるサンプルでは画像の(0、0)のセルから選択できるのですが、これを(1,2)を選択できるセルの開始点として5×6の範囲で選択できるようにしたいと思っています。 </tytle>までのひながた以降のコードです。 わかる方よろしくお願いします。 <style type="text/css"> html, body{ margin: 0px; } table{ -moz-user-select: none; -khtml-user-select: none; user-select: none; width: 500px; height: 500px; } table, td, th{ margin: 10px; border-style: solid; border-color: black; border-width: 1px; } </style> <script type="text/javascript"> var startCell = null; //マウスダウンのイベント処理 function mouseDown(table, e){ if (!e) var e = window.event; startCell = e.srcElement? e.srcElement: e.target; if(startCell.tagName != "TD"){ startCell = null; return; } mouseMove(table, e); } //マウスアップのイベント処理 function mouseUp(table, e){ if (!e) var e = window.event; var endCell = e.srcElement?e.srcElement:e.target; if(!(endCell.tagName=="TD" && startCell)) return false; //セルの位置を取得 var from = getCellPos(table, startCell); var to = getCellPos(table, endCell); if(!from || !to) return false; //mouseMoveで選択状態表示の更新をさせないようにする startCell = null; //ここに選択後の処理を書く alert("("+from.col+", "+from.row+") -> ("+to.col+", "+to.row+")"); } //マウス移動のイベント処理 function mouseMove(table, e){ if (!e) var e = window.event; var endCell = e.srcElement?e.srcElement:e.target; if(!(endCell.tagName=="TD" && startCell)) return false; //セルの位置を取得 var from = getCellPos(table, startCell); var to = getCellPos(table, endCell); if(!from || !to) return false; //色を変更 var x, y, cells; for(y=0; y<table.rows.length; y++){ row = table.rows.item(y); for(x=0; x<row.cells.length; x++){ if((from.row-y)*(y-to.row)>=0 && (from.col-x)*(x-to.col)>=0) row.cells.item(x).style.backgroundColor = "#ffdddd";//選択状態の色 else row.cells.item(x).style.backgroundColor = "transparent";//未選択状態の色 } } } //tableの中のcellの位置を取得する function getCellPos(table, cell){ var pos = new Object(); if(cell.nodeName == "TD"){ var x, y, cells; for(y=0; y<table.rows.length; y++){ row = table.rows.item(y); for(x=0; x<row.cells.length; x++){ if(row.cells.item(x) == cell){ pos.row = y; pos.col = x; return pos; } } } } return null; } </script> </head> <body><!-- Google Analytics Start --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-9296140-1"); pageTracker._trackPageview(); } catch(err) {} </script> <!-- Google Analytics End --> <table onmousedown="mouseDown(this, event); return false;" onmouseup="mouseUp(this, event);" onmousemove="mouseMove(this, event); return false;"> <tr> <td>(0,0)</td><td>(1,0)</td><td>(2,0)</td><td>(3,0)</td><td>(4,0)</td><td>(5,0)</td><td>(6,0)</td> </tr> <tr> <td>(0,1)</td><td>(1,1)</td><td>(2,1)</td><td>(3,1)</td><td>(4,1)</td><td>(5,1)</td><td>(6,1)</td> </tr> <tr> <td>(0,2)</td><td>(1,2)</td><td>(2,2)</td><td>(3,2)</td><td>(4,2)</td><td>(5,2)</td><td>(6,2)</td> </tr> <tr> <td>(0,3)</td><td>(1,3)</td><td>(2,3)</td><td>(3,3)</td><td>(4,3)</td><td>(5,3)</td><td>(6,3)</td> </tr> <tr> <td>(0,4)</td><td>(1,4)</td><td>(2,4)</td><td>(3,4)</td><td>(4,4)</td><td>(5,4)</td><td>(6,4)</td> </tr> <tr> <td>(0,5)</td><td>(1,5)</td><td>(2,5)</td><td>(3,5)</td><td>(4,5)</td><td>(5,5)</td><td>(6,5)</td> </tr> <tr> <td>(0,6)</td><td>(1,6)</td><td>(2,6)</td><td>(3,6)</td><td>(4,6)</td><td>(5,6)</td><td>(6,6)</td> </tr> </table> </body> </html>

  • Table内TDの子要素を移動させたいのですが・・

    初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD>  ← (1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD>  ← (2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD>  ← (3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)~(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、1番目のテーブルを取得する var rows = $("table")[0].rows; // 列を1つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を1つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか?

  • テーブルのセルのクリック時、セル内の文字を太くするには

    テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。 ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。 div要素上でクリックしたら、特定のセルの文字(この場合、id='text1'のセル)の文字を太字にしたいのです。 なお、OnClick時の処理は、外部JavaScriptで行います。 <table> <tr> <td> <div id='div1' textid='text1' onclick="ChgText(event,this)"> <table width='100%'> <tr> <td width='10%'>あああ</td> <td id='text1'>いいい</td> </tr> </table> </div> </td> <tr> </table> イベント元であるdiv要素と、処理対象のTDを関係付けるために、div要素内に「textid='text1'」定義し、外部JavaScriptでは、document.getElementByIdで処理対象を特定し、最終的には、文字を太くしたいと考えています。 外部JavaScriptの概要は以下の通りです。 function ChgText(ev,item){ var text_item = null; text_item = item.tdtext_id; var chgText = document.getElementById(text_item ); chgText.style.font-weight = bold; } 上記の内容で実行しても、文字の太さは変わりませんでした。 フォントの指定の仕方がまちがっているのでしょうか? それとも、そもそも、div要素より後に定義されるTDタグのIDをdiv要素自身が認識しないのでしょうか? 根本的な考え方が間違っているかもしれないので、よきアドバイスをいただけるとありがたいです。 よろしくお願いいたします。