JavaScript初心者です。お力をお貸しください。 PHPでデータベースから複数行のデータをテーブル構造で出力しています。行数はデータの量で変動します。 ■出力されたHTML 条件：ここでは、makerの内容を取得しようとしています。データは仮に3行としています。そこで、JavaScriptで「Copy」ボタンの押された行のテキストデータを取得したいのですが、うまくいきません。 function dataCopy(){ var row = ?? var hoge = admin_list[row].maker.value; //テキストエリアの値を取得 alert(""+ hoge +"が入力されました。"); } ちなみに var hoge = admin_list[0].maker.value; だと、「Sonyが入力されました。」と表示されます。なにとぞよろしくお願いいたします。

ANo1です。＞いろいろ探して試してみましたが、うまくいきません。おやっ、なんかのライブラリを利用なさっているのでしょうか？ご質問文にはありませんでしたが・・・＞サンプルコードを頂けると助かります。引数で渡す方法は、理解なさっていらっしゃると思いますので、ANo1の最初にあげた方法の一例を以下に… ※ trの数（行数）が変わってもスクリプトはそのまま利用できます。 ※ tableが存在しなかったり、構造が変わるとエラーになります。 Sample document.querySelector("form[name='admin_list'] table") .addEventListener("click", function(e){ var t = e.target; if( t.type != "button" || t.value != "Copy") return false; var p = t.parentNode.parentNode; alert(p.querySelector("td:first-child input").value); }, false);

ANo2です。ご質問文をコピペしてしまい気が付きませんでしたが… HTMLのとの閉じタグの順序が逆ですね。一応、訂正しておきます。

JavaScriptで、コピーボタンを配置し、その行のテキストデータを取得したいのです。

解決済

質問者：kairos355
質問日時：2017/03/20 10:15
回答数：3件

JavaScript初心者です。
お力をお貸しください。

PHPでデータベースから複数行のデータをテーブル構造で出力しています。
行数はデータの量で変動します。

■出力されたHTML
<form name="admin_list">
<table><tbody>
<tr><td><input type="text" name="maker" value="Sony" required></td></td><td><input type="button" id="Copy" value="Copy" onclick="dataCopy()"></td></tr>
<tr><td><input type="text" name="maker" value="TOSHIBA" required></td></td><td><input type="button" id="Copy" value="Copy" onclick="dataCopy()"></td></tr>
<tr><td><input type="text" name="maker" value="Apple" required></td></td><td><input type="button" id="Copy" value="Copy" onclick="dataCopy()"></td></tr>
</table></tbody>
</form>

条件：ここでは、makerの内容を取得しようとしています。データは仮に3行としています。

そこで、JavaScriptで「Copy」ボタンの押された行のテキストデータを取得したいのですが、うまくいきません。

<script type="text/javascript">
function dataCopy(){
var row = ??
var hoge = admin_list[row].maker.value; //テキストエリアの値を取得
alert(""+ hoge +"が入力されました。");
}
</script>

ちなみに
var hoge = admin_list[0].maker.value;
だと、「Sonyが入力されました。」と表示されます。

なにとぞよろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

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

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2017/03/21 09:15

ANo1です。

＞いろいろ探して試してみましたが、うまくいきません。
おやっ、なんかのライブラリを利用なさっているのでしょうか？
ご質問文にはありませんでしたが・・・

＞サンプルコードを頂けると助かります。
引数で渡す方法は、理解なさっていらっしゃると思いますので、ANo1の最初にあげた方法の一例を以下に…
※ trの数（行数）が変わってもスクリプトはそのまま利用できます。
※ tableが存在しなかったり、構造が変わるとエラーになります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
</head>

<body>
<form name="admin_list">
<table><tbody>
<tr>
<td><input type="text" name="maker" value="Sony" required></td>
<td><input type="button" value="Copy"></td>
</tr><tr>
<td><input type="text" name="maker" value="TOSHIBA" required></td>
<td><input type="button" value="Copy"></td>
</tr><tr>
<td><input type="text" name="maker" value="Apple" required></td>
<td><input type="button" value="Copy"></td>
</tr>
</table></tbody>
</form>

<script type="text/javascript">
document.querySelector("form[name='admin_list'] table")
.addEventListener("click", function(e){
var t = e.target;
if( t.type != "button" || t.value != "Copy") return false;
var p = t.parentNode.parentNode;
alert(p.querySelector("td:first-child input").value);
}, false);
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

引き続きありがとうございます！！
本日がんばってやってみます。
取り急ぎお礼まで。

通報する

お礼日時：2017/03/22 08:37

No.3

回答者： fujillin
回答日時：2017/03/21 10:29

ANo2です。

ご質問文をコピペしてしまい気が付きませんでしたが…

HTMLの<table>と<tbody>の閉じタグの順序が逆ですね。
一応、訂正しておきます。

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2017/03/20 14:01

こんにちは

外側のtable要素にイベントを設定しておけば、ひとつですむと思いますが、今テストできる環境にないので(携帯なので)、とりあえず簡単な方法を。

呼出し側に、dataCopy(0)、dataCopy(1)・・のように引数でrowを与えておいて、
　function dataCopy(row){ ～～ }
で受けとればよろしいのではないでしょうか。

引数を0、1・・と変えるのが面倒なら、一律でthisにしておけばクリックされた要素が渡されるので、そこからたどってもよいですね。

ついでながら、ご提示のHTMLではtdの閉じタグが余分なようですし、id=Copyが重複しているので文法違反になっています。
修正なさっておいた方が宜しいかと。

- 0
- 件

通報する

この回答へのお礼

こんにちは。お休みのところご親切にありがとうございます！
アドバイスを頂き、いろいろ探して試してみましたが、うまくいきません。。。

$('table').delegate('td', 'click', function(){ //イベント発生
　var $cur_row = $(this).parent()[0];
...？？？
});

お時間あるときで良いので、サンプルコードを頂けると助かります。
すいません。

通報する

お礼日時：2017/03/20 16:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！