Q&A
ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
以下のような内容でnyuuryokuボタンが押されたらその行番号をパラメータとしてfncset_dataに渡したいです。
★部分に該当のボタンの行番号を入れるようにしたらよいのですが、
rowIndexや$(this).parent()[0]や$("tr").index(this)などいろいろと調べた結果を★部分へ入れても-1が入ってしまい行番号が出力されません。
どのようにしたら渡せますでしょうか？
環境はwindows10のIEとなります。
html
1<table border="0" cellspacing="0" cellpadding="0"> 2 <tr> 3 <th scope="col" class="f-weight" style="width:50px;"> </th> 4 <th scope="col" width="220px" class="f-weight">データ１</th> 5 <th scope="col" width="120px" class="f-weight">データ２</th> 6 </tr> 7 <tr> 8 <td style='width:50px;' align='center'> 9 <input name='nyuuryoku' type='button' id='nyuuryoku' onclick='fncset_data(★);' value='入力' /> </td> 10 <td>"._hs($CN->GetFieldData('aaaaa'))."</td> 11 <td>"._hs($CN->GetFieldData('bbbbb'))."</td> 12 </tr> 13</table>
上記にも記載しておりますが、試してみたコードは以下のような内容です。
このように$("table_id").index(this)や数パターン試してもfncset_dataには-1しか返ってきませんでした。
html
1<table id="table_id" border="0" cellspacing="0" cellpadding="0"> 2 <tr> 3 <th scope="col" class="f-weight" style="width:50px;"> </th> 4 <th scope="col" width="220px" class="f-weight">データ１</th> 5 <th scope="col" width="120px" class="f-weight">データ２</th> 6 </tr> 7 <tr> 8 <td style='width:50px;' align='center'> 9 <input name='nyuuryoku' type='button' id='nyuuryoku' onclick='fncset_data($("table_id").index(this));' value='入力' /> </td> 10 <td>"._hs($CN->GetFieldData('aaaaa'))."</td> 11 <td>"._hs($CN->GetFieldData('bbbbb'))."</td> 12 </tr> 13</table>
このようなパターンでも確認しています。
html1.php
1<table id="table_id" border="0" cellspacing="0" cellpadding="0"> 2 <tr> 3 <th scope="col" class="f-weight" style="width:50px;"> </th> 4 <th scope="col" width="220px" class="f-weight">データ１</th> 5 <th scope="col" width="120px" class="f-weight">データ２</th> 6 </tr> 7 <tr> 8 <td id='nyuuryoku' style='width:50px;' align='center'> 9 <input type='button' onclick='fncset_data(0);' value='入力' /> </td> 10 <td>"._hs($CN->GetFieldData('aaaaa'))."</td> 11 <td>"._hs($CN->GetFieldData('bbbbb'))."</td> 12 </tr> 13</table>
html2.php(html1.phpの呼び元)
1function fncset_data(data) { 2 3 try{ 4 alert($("td.nyuuryoku").index(this));★-1が表示される 5 }catch( e ){ 6 alert('err'); 7 } 8 9}
提案していただいたように、テーブルの呼び元で行数を取得するようにしました。
取得した行数を用いて、テーブルの値をtbl.rows[？].cells[？].innerText;などで取得します。
html1.php
<table id="table_id" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col" class="f-weight" style="width:50px;"> </th> <th scope="col" width="220px" class="f-weight">データ１</th> <th scope="col" width="120px" class="f-weight">データ２</th> </tr> <tr> <td id='nyuuryoku' style='width:50px;' align='center'> <input type='button' value='入力' /> </td> <td>"._hs($CN->GetFieldData('aaaaa'))."</td> <td>"._hs($CN->GetFieldData('bbbbb'))."</td> </tr> </table>
html2.php(html1.phpの呼び元)
$(document).ready(function () { $("#table_id").click(function() { alert($("td.nyuuryoku").index(this)); var value = tbl.rows[？].cells[？].innerText; $("#data_name").val(value); }); });
・他にも試してみたこと
html2.phpのclick(function() のなかで以下を実施してみましたが、なぜかundefinedとエラーとなり行数が取得できませんでした。
var col = $("#table_id").cellIndex;
alert(col);
また、以下も同様でundefinedと出力されました。
alert('行:'+this.parentNode.rowIndex+'列:'+this.cellIndex)
・またまた試してみたこと
やはりうまくいかないのでhtml1.phpでonclickを使用し、onclick='fncset_data(this);'と記載しそれを受け取ったhtml2.phpのfncset_data内で受け取ったthisを使用し、以下のように処理してみましたが結果は-1,undefined,undefinedとなり行数は出力されませんでした。
同記載すればよいのでしょうか？
function fncset_data(data) { try{ alert($("#table_id").index(data)); alert('行:'+data.parentNode.rowIndex) alert('行:'+data.cellIndex) }catch( e ){ alert('err'); } }
回答2件
0
自己解決
自己解決しました。
<input>部分に書いていたonclick='fncset_data(this);を<td>部分に書けばhtml2.php側で正常にクリックされた行番号が出力できました。
その行番号を使ってテーブルのデータを収集できました。
修正後のソース
html1.php
<table id="table_id" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col" class="f-weight" style="width:50px;"> </th> <th scope="col" width="220px" class="f-weight">データ１</th> <th scope="col" width="120px" class="f-weight">データ２</th> </tr> <tr> <td id='nyuuryoku' onclick='fncset_data(this);' style='width:50px;' align='center'> <input type='button' value='入力' /> </td> <td>"._hs($CN->GetFieldData('aaaaa'))."</td> <td>"._hs($CN->GetFieldData('bbbbb'))."</td> </tr> </table>
html2.php(html1.phpの呼び元)
function fncset_data(data) { try{ var col = data.parentNode.rowIndex; var tbl = document.getElementById('table_id'); var value = tbl.rows[col].cells[col].innerText; $("#data_name").val(value); }catch( e ){ alert('err'); } }
投稿2018/03/18 01:52
編集2018/03/18 02:10
総合スコア22
0
<td>"._hs($CN->GetFieldData('aaaaa'))."</td> こういう書き方をされていると言うことはサーバサイドで出力していると思いますが、そちらで番号を出力されてはいかがでしょうか。
.index() はjQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返すものなので、$("td.nyuuryoku").index(this) とするには thisが nyuuryokuクラスのついたtdのDOM element である必要があります。
（こう書くとわかりにくいですが。ちなみにこういうことではありません⇒$("td.nyuuryoku").index(td.nyuuryoku)）
【.index() | jQuery API Documentation】
https://api.jquery.com/index/
また、jQueryを使うならonclick属性を使わずに書いた方がコードの見通しが良くなると思いますよ。
投稿2018/03/17 15:48
総合スコア69458
oncrickを使わずに、サーバサイドで出力するようにいたします。
サーバーサイドの$("#table_id").click(function() {内で
ボタンが押された行数を出力するにはどう記述したらよいでしょうか？alert($("td.nyuuryoku").index(this));の記載では行数は出力されませんでした。
とりあえず
・現在何をどう試したかがわからない
・サーバサイドが何を使っているかわからない
・最終的に行数を何に使うかによって最適な書き方が違う
試したことを追記します。
いろいろ調べてみましたが、$("td.nyuuryoku").index(this) とするには thisが nyuuryokuクラスのついたtdのDOM element である必要があるということで、サーバサイドの話は無しにして、ここではonclickでパラメータとしてonclick='fncset_data(this);というように渡したいと思います。
本文に追記していますが、現状はそのやりかたでfncset_data内でalert('行:'+data.parentNode.rowIndex)や他2パターンもやっても行数が取得できないのですが、どうしたら取得できますでしょうか？
私の勘違いでうまくいっていないようでした。
ありがとうございました。
あなたの回答
tips
プレビュー
