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

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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

ANo2です。



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

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

こんにちは



外側の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を見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Q

<input type="button" value="削除" onclick="delete('3');">として
関数の引数の値をpostしたいです。どのように処理したらよいでしょうか?教えてください。飛び先はdel.phpです

Aベストアンサー

単体のformにして buttonじゃなくsubmitじゃだめなの?

他にも値があってうんたらかんたら っていうなら
javascriptでsubmitするしかないね
http://www.google.com/search?hl=ja&q=javascript%20post
ただ、javascriptでformの値をいじってsubmitする場合、罠がいくつかあるからいじる場合は要注意。

Q

<input type="hidden" name = "hoge">があったとします。
これを、javascriptを使用し nameで検索します。
”hoge”を検索後、その”hoge”という名前を変更する方法を探しています。 

<input type="hidden" name = "hoge">
       ↓↓↓↓↓
<input type="hidden" name = "fuga"> 

リフレッシュ無しで、上記のようにnameを変える方法が知りたいです。

ご存知の方おりましたら、お手数ですが教えていただけませんでしょうか。
宜しくお願いいたします。

Aベストアンサー

タグが特定出来れば、setAttribute等で属性値を変更出来ます。
setAttribute("name","fuga")

Qで、Q1に後で値を設定して表示するには

お世話になります。
<input type="text" name="Q1">で、Q1に後で値を設定して表示するにはどうしたら良いものでしょうか。
name="Q1"
と、しているので、
onMousedown="function()"
で、nameでしてしたエリアに値を書き込めば、できると思うのですが、
このfunction()をどのように書いたらよいものか、いろいろ調べてもわかりません。
何とかご教示願えないでしょうか。
よろしくお願いします。

Aベストアンサー

javascriptを利用することで出来ます。
こんな感じで動くでしょう。
ちなみにテキストボックスなどをjavascriptで操作する場合は
idをつけておくと便利です。

これ以上をやりたいというのであれば
参考URLなど見て勉強してみてください
<html>
<head>

</head>
<body>

<input type="text" id="Q1" name="Q1" onmousedown="hoge()">
</body>
<script type='text/javascript'>
function hoge()
{
Q1.value = ""; //""のなかに設定する値
}
</script>

参考URL:http://www.parkcity.ne.jp/~chaichan/src/javasc21.htm

Qのvalue値をプルダウンメニューから受け取りたいのです

<input>のvalue値をプルダウンメニューから受け取りたいのですが、Javascriptを使用すれば出来るものでしょうか?もし可能でしたら、そのコードを教えて頂きたいです。
当方htmlとcssが少し出来る程度で、ウェブで調べても分からなかったので質問させていただきました。

以下はソースになります。



プルダウンのソース:

<FORM>
<SELECT>
<OPTION SELECTED>SELECT</OPTION>
<OPTION VALUE="AAABBB">A</OPTION>
<OPTION VALUE="BBBBBB">B</OPTION>
<OPTION VALUE="CCCCCC">C</OPTION>
</SELECT>
</FORM>


↑上で選択したvalueの値を、↓下の「ここの値」に渡したいです。


inputのソース:

<input name="hosted_button_id" value="ここの値" type="hidden">



宜しくお願いいたします。

Aベストアンサー

単純にやるならidをふって以下のようにします。
関数化したほうが汎用性はあります
(hiddenだとわたっているかわからないのでtextにしてあります)

<FORM>
<SELECT onchange="document.getElementById('hosted_button_id').value=this.value">
<OPTION SELECTED>SELECT</OPTION>
<OPTION VALUE="AAABBB">A</OPTION>
<OPTION VALUE="BBBBBB">B</OPTION>
<OPTION VALUE="CCCCCC">C</OPTION>
</SELECT>
</FORM>

<input name="hosted_button_id" id="hosted_button_id" value="ここの値" type="text">


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報