Javascriptで動的なTableのButtonを作成し、クリックしたセルの値を取得する方法

2023/11/03 09:21

このQ&Aのポイント

Javascriptを使用して、動的なTableのButtonを作成しました。次に、クリックしたセルの値を取得する方法について学ぶことが目標です。
上記のサイトを参考に、Javascriptで動的なTableを作成する方法を学びました。しかし、クリックしたセルの特定の列の値を取得する方法についてはまだ分かりません。
Javascriptを使用して動的なTableを作成し、クリックしたセルの値を取得する方法を知りたいです。ご教授いただけると幸いです。

ベストアンサー

Javascriptで動的なTableのButto

2017/03/15 21:47

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); } 上記を実行するとクリックした行のすべての列の値を取得できました. クリックした行の,特定の列の値のみを取得するにはどうすればよいでしょうか? 何卒ご教授よろしくお願い致します.

con014057
お礼率61% (191/310)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

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

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2017/03/15 22:56 回答No.1

var str = table.rows[y].cells[x].textContnt || ''

関連するQ&A

javascriptで指定するtrを削除した時に、IEとfirefoxで動作が異なる
はじめて、投稿いたします。現在、javascriptで指定した行を削除するような動作を作っているのですが、firefoxとIEで動作が異なってしまうため困っています。ちなみに、firefoxでは、実現してほしい動作をしてくれるのですが、IEではうまく動作してくれません。 tableのtrが3つ以上ある場合は、指定した行が正常に削除します。しかし、IEだと、trが２つの時には、1番目のtrを削除しようとすると、一緒に2番目のtrの中身が見えなくなってしまいます。ちなみに、その中の情報が削除されたのかなと思い、alertで表示させるとどうやら削除はされておらず、表示しなくなってしまうようです。どうすれば、firefoxとIEで、同じような動作をするようにできるのでしょうか？よろしくお願いします。以下に、ソースを貼っておきます。 <html> <head> <script type="text/javascript">  </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>
- ベストアンサー
- JavaScript
JavaScriptで、テーブルクリックした時の
PHPを勉強中です。どうしてもJavaScriptの力を借りなければならず、少し頑張ってみましたがお手上げですのでどなたかご教授ください。画面に社員マスタテーブル['tbl_A]があります。【イメージ】社員ID　　｜　社員名　　｜　住所　　｜　　１　　　　　　東京花子　　　港区～　　3　　　　　　板橋亜希　　　板橋区～　　8　　　　　　瀬田　南　　　　世田谷区～名前や住所をクリックしたときに、その人の社員IDを取得したいのです。クリックしたセル自体の情報は色々ネットで調べて取得できたのですが、クリックした行の［社員ID］が欲しいのです。ちなみに、クリックしたセルの情報はweb上から似たような処理のものを探してきて下記のようにしてます。現在の私は、解読はできますが、自分ではこれは作れないレベルです。こちらに手を加える形か、まったく別物でも構いませんのでよろしくおねがいします。 function getCELL() { var myTbl = document.getElementById('tbl_A'); // trをループ。rowsコレクションで,行位置取得。 for (var iL=0; iL < myTbl.rows.length; iL++) { // tr内のtdをループ。cellsコレクションで行内セル位置取得。 for (var iC=0; iC<myTbl.rows[iL].cells.length; iC++) { var Cells=myTbl.rows[iL].cells[iC]; //iL番行のiC番列のセル "td" // onclickで 'Mclk'を実行。thisはクリックしたセル"td"のオブジェクトを返す。 Cells.onclick = function(){Mclk(this);} } } } function Mclk(Cell) { var rowINX = '行位置：'+Cell.parentNode.rowIndex;//Cellの親ノード'tr'の行位置 var cellINX = 'セル位置：'+Cell.cellIndex; var cellVal = 'セルの内容：'+Cell.innerHTML; //取得した値の書き出し res=rowINX + ' '+ cellINX + ' ' + cellVal; document.getElementById('hoge').value=res; }
- ベストアンサー
- JavaScript
tableの中にtableを作ると、width指定が機能しない
tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。例： <table width=300> <tr><td> <table width=100> <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr> </table> </td><td> <table width=100> <tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr> </table> </td><td> <table width=100> <tr><td>ccccccccccccccccccccccccccccccccccc</td><tr> </table> </td></tr> </table> width=300のテーブルの中にwidth=100のテーブルが3つできたのはいいのですが、width=100のテーブルの中に100pxを超える文字列を入れると100pxという値を無視してテーブルが横長くなってしまいます。これを100pxという値に従わせるにはどうしたらいいでしょうか？
- ベストアンサー
- HTML
異なるセルに触れる度、テーブル背景画像もそれぞれ変化させる方法
オンマウスで異なるセルなどの背景を変える方法 http://okwave.jp/qa4890043.html で質問した者です。その質問で教えて頂いたやり方(※1)を応用して、異なるセルに触れる度に、テーブル自体の背景もそれぞれ異なる画像に変化させる方法を教えて下さい。　マウスオーバーで変化、マウスアウトで元の背景に戻る、というかたちでお願いします。　＊　＊　＊　テーブルにaaa.jpgという背景が設定されているとして、 <table><tr> <td>1111</td>　←このセルに触れるとテーブル背景がbbb.jpgに変化。 <td>2222</td>　←このセルに触れるとテーブル背景がccc.jpgに変化。 </tr></table> どのセルでもマウスアウトで元のaaa.jpgに戻る。 (※1) <script> function change(obj){ var p=obj.parentNode; while(p){ if(p.nodeName=="TABLE") break; p=p.parentNode; } p.style.backgroundImage="url(****.jpg)"; } </script> <table> <tbody> <tr> <td onMouseover="change(this)">1111</td> <td>2222</td> <td>3333</td> </tr> </tbody> </table> 私からのレスは明日以降になってしまいますが、宜しくお願いします。
- ベストアンサー
- HTML
javascriptで作成されたテーブルの値を取得したい
javascriptで作成されたテーブルの値を取得したいです。具体的には、最初に作成するテーブルの大きさを入力するフォームがあり、ボタンを押すと、そこに入力された値によってテーブルが作成され、さらに、そこにデータを入力して、また次のボタンを押せばテーブルに入力された値を取得できるようにしたいです。最初のテーブルの大きさを入力するフォームと、テーブルを作成することはできたのですが、そこから入力された値を取得する方法が分からず、困っています。そのプログラムはこんな感じです。分かる方いらっしゃいましたら、お知恵をお貸しください。よろしくお願いします。 <html> <head> <title>テスト</title> </head> <body> <form name="myForm"> <p>mac.itemを半角数字で入力してください</p> mac <input type="text" size="10" name="myFormKK"> item <input type="text" size="10" name="myFormI"> <input type="button" value="ＯＫ" onclick="addAll()"> </form> <br> <p>処理量　段取り時間　段取り費　梯状在庫保管費を入力</p> <form name="fpsck" method="post" enctype="text/plain" action=""> <TABLE BORDER="1" id="Table2"> </TABLE> </form> <script type="text/javascript"> //３行目以降　開始  </script> <script type="text/javascript"> //すべての関数実行  </script> </body> </html>
- 締切済み
- JavaScript
javascriptでクリックするごとにセルの色を変えたい
javascript初心者です。現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。現在下記のように作っていますがエラーが起きてしまいます。どのように直せばよいかご教授願います。 <script type="text/javascript">  </script> <body> <table border="1" cellpadding=20> <tr> <td onClick = "onC(this)"><br> </td> </tr> </table> </body>
- ベストアンサー
- JavaScript
tableの中のtableが追加できない。
罫表追加ボタンを押すと既存のtableの中に新しくtableを追加する処理を作成しましたが、追加した罫表が正しく表示されません。罫表追加後、innerHTMLでテキストボックスに表示し、それをコピーして、HTMLで開いてみるときちんと追加されているようです。なぜtableの中のtableが作られないのでしょうか。別の方法でも良いので、ボタンをおした時に動的にtableの中にtableを追加する方法ありますでしょうか。以下HTMLとjsです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="kei_test.js"></script> </head> <body> <div> <input type="button" value="罫表追加" onclick="addDanraku('keihyou')" /> </div> <form name='form1'> <input type="text" name="strJbnTxt" size=100 maxlength=10000 /> </form> <table width="100%" border=1 style='border-collapse:collapse;border:none'> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt'> <p>あいうえお。</p> </td> </tr> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt;'> <p>かきくけこ。</p> </td> </tr> </table> </body> </html> 以下jsファイル var cellCnt = 0; var rowArray = new Array(100); var colArray = new Array(100); window.onload = init; function init(){ var mouseFlg = 0; var col; var row; var td = document.getElementsByTagName("td"); var length = td.length; //alert('td数:'+length); for(var i = 0; i < length; i++) { td[i].onclick = function (){ this.style.backgroundColor = "yellow"; //列番号取得 var befTd = this.previousSibling; var col = 0; while(befTd){ if(befTd.nodeName=="TD")col++; befTd=befTd.previousSibling; } //行番号取得 var befTr = this.parentNode.previousSibling; var row=0; while(befTr){ if(befTr.nodeName=="TR") row++; befTr=befTr.previousSibling; } rowArray[cellCnt] = row; colArray[cellCnt] = col; cellCnt = cellCnt + 1; } } } function addDanraku( danraku ){ if( cellCnt != 1){ alert("１つのみ選択して実行してください。"); return; } //trを取得 var trNode = document.getElementsByTagName("tr"); var trLength = trNode.length; for(var i = 0; i < trLength; i++) { if( i == rowArray[0]){ //新しい段落（tr）を追加 var newTr = document.createElement("tr"); var nextTr = trNode[i].nextSibling; var oyaTable = nextTr.parentNode; oyaTable.insertBefore(newTr, nextTr); //tdを追加 var newTd = document.createElement("td"); newTd.style.width = "100.0%"; newTd.style.border = "solid windowtext 1.0pt"; newTr.appendChild(newTd); //tableノードを追加 alert(newTd.nodeName); var newTable = document.createElement("table"); newTable.style.border = "none"; newTable.style.borderCollapse = "collapse"; newTd.appendChild(newTable); //trノードを追加 for(var j = 0; j < 2; j++) { var newTr2 = document.createElement("tr"); newTable.appendChild(newTr2); for(var k = 0; k < 2; k++) { //tdノードを追加 var newTd2 = document.createElement("td"); newTd2.style.width = "100.0pt"; newTd2.style.border = "solid windowtext 1.0pt"; newTr2.appendChild(newTd2); //pノードを追加 var newP2 = document.createElement("p"); newTd2.appendChild(newP2); //textノードを追加 var newText2 = document.createTextNode("追加テスト"); newP2.appendChild(newText2); } } } } form1.strJbnTxt.value = newTr.parentNode.parentNode.parentNode.innerHTML; }
- ベストアンサー
- JavaScript
TABLEタグの幅指定
テーブルの幅を厳密に指定したいのですが、例えば以下のような１行２列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか？よろしくお願いします。
- 締切済み
- HTML
JavaScriptについて
下記のJavaScriptでウィンドウサイズを取得し、その値に応じてTableサイズを変化させるhtmlを作成したいのですが、どうすれば良いですか？ ※下のスクリプトから???部分に値を入れたい。 <table width=??? height=??? border=1> <tr><td></tr></td> </table> //ウィンドウサイズを取得する function getWindowSize() { var sW,sH,s; sW = window.innerWidth; sH = window.innerHeight; s = "横幅 = " + sW + " / 高さ = " + sH; document.getElementById("WinSize").innerHTML = s; } </script>
- 締切済み
- JavaScript
動的なtableの値を取得したい
いつもお世話になります。見よう見まねでやっている超初心者です。下記の様なテーブル（phpで読み込んでいますので実際は動的です。）の回答ボタンをクリックするとテーブル下の<INPUT type="text" name="kotae">にボタンをクリックされた行のｂ列の値を入れたいと思っています。 function　kaito()をどのように書いたら取得できるか悩んでいます。初心者なもので具体的な回答でしたら助かります。ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- ベストアンサー
- JavaScript