最新閲覧日:

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が入力されました。」と表示されます。

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

  • 画像を添付する (ファイルサイズ:10MB以内、ファイル形式:JPG/GIF/PNG)
  • 今の自分の気分スタンプを選ぼう!
あと4000文字

A 回答 (3件)

ANo2です。



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

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

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>
    • good
    • 0
この回答へのお礼

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

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

こんにちは



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


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

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

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

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


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

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

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

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


人気Q&Aランキング

おすすめ情報