みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascript でリンクを動的に変更する方法

下記のようなシステムを作成をしようと思っています。
javascript がまだあまり理解していない為ご教授いただければ幸いです。
質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。
下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。

<a href="#" onClick="window.open('store1.php?from=js&amp;no=「この部分」','search_store1','width=540,height=540')">検索</a>

宜しくお願い致します。

サンプルコード

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript">
<!--
var i = 1;
var maxrows = 10;
function hage() {
i++;
// Tbody への参照を取得します
var mybody=document.getElementById("histTablebody");
mystore_row=document.createElement("TR");
mystore_row.setAttribute("id","histrow"+i);
mystore_cell=document.createElement("TD");
mystore_cell.setAttribute("id","num");
currenttext=document.createTextNode(i);
mystore_cell.appendChild(currenttext);

mystore_row.appendChild(mystore_cell);
mystore_cell=document.createElement("TD");
currenttext=document.createTextNode("店舗ID");
mystore_cell.appendChild(currenttext);

mystore_row.appendChild(mystore_cell);
mystore_cell=document.createElement("TD");
mystore_form.setAttribute("type","TEXT");
mystore_form.setAttribute("name","store_id" + i);
mystore_form.setAttribute("value","");
mystore_form.setAttribute("id", "storecell");
mystore_cell.appendChild(mystore_form);

mystore_form=document.createElement("INPUT");
mystore_form.setAttribute("type","TEXT");
mystore_form.setAttribute("name","store_name" + i);
mystore_form.setAttribute("value","");
mystore_form.setAttribute("id", "storecell");
mystore_cell.appendChild(mystore_form);

mystore_row.appendChild(mystore_cell);
mystore_cell=document.createElement("TD");
//mystore_cell=document.createElement("a");

mystore_row.appendChild(mystore_cell);
mybody.appendChild(mystore_row);
document.register.delrow.disabled=false;
if(i>=maxrows){
document.register.addrow.disabled=true;
}
}
var hige = function() {
var mytable=document.getElementById("histTablebody");
var removeTable=document.getElementById("histrow"+i);
mytable.removeChild(removeTable);
i--;
if(i==1){
document.register.delrow.disabled=true;
}
// 追加ボタンを有効にする
document.register.addrow.disabled=false;
}
var result = function() {
alert('');
}
//-->
</script>
</head>
<body>
<form name="register">
<div id="hist">
<table border="1">
<tbody id="histTablebody">
<tr id="histrow1">
<td id="num">1</td>
<td>店舗ID</td>
<td><input type="text" name="store_id1" id="storecell"><input type="text" name="store_name1" id="storecell"></td>
<td>
[<a href="#" onClick="window.open('store1.php?from=js&amp;no=[]','search_store1','width=540,height=540')">検索</a>]

</td>
</tr>
</tbody>
</table>
</div>
<table>
<tr>
<td>
<input type="button" id=addrow value="行を追加"
onClick="hage();">
</td>
<td>
<input type="button" id=delrow value="行を削除"
onClick="hige();" disabled="true">
</td>
<td>
<input type="button" value="登録" onClick="result()">
</td>
</tr>
</table>
</form>
</body>
</html>

投稿日時 - 2011-05-09 17:45:56

QNo.6725627

困ってます

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

#1です。

さっき、気が付いたのですが、たいして違わないけれどこっちのほうが面倒なことをしなくてすむので簡単かも…
(簡略化のためtrのidを復活してます。勿論無くても可能)

<script language="JavaScript">
<!--
var maxrows = 10; //最大行数

function hoge(flag){
 var tbody = document.getElementById("histTablebody"),
   tr = tbody.getElementsByTagName("tr"),
   n = tr.length + (flag?1:-1),
   i, input, a;

//1行追加
 if(flag){
  tr = tr[0].cloneNode(true);
  tr.setAttribute("id", "histrow" + n);
  tbody.appendChild(tr);
  tr.cells[0].innerHTML = n;
  input = tr.getElementsByTagName("input");
  for(i=0; i<2; i++){
   input[i].value = "";
   input[i].setAttribute("name", "store"+ ["id","name"][i] + n);
  }
 } else {
//1行削除
  tbody.removeChild(tr[n]);
 }

//ボタンの有効/無効処理
 document.getElementById("addrow").disabled = n>=maxrows;
 document.getElementById("delrow").disabled = n<2;
}

var result = function() {
alert('');
}

function w_open(evt){
 var t = evt.target || evt.srcElement;
 if(t.nodeName != "A" || t.innerHTML != "検索") return;
 var n = t.parentNode.parentNode.id.replace("histrow","");
 var url = "store1.php?from=js&amp;no=[" + n + "]";
 window.open(url, "search_store1", "width=540,height=540");
}
//-->
</script>
</head>
<body>

<form name="register">
<div id="hist">

<table border="1" onclick="w_open(event)">
<tbody id="histTablebody">
<tr id="histrow1">
<td>1</td>
<td>店舗ID</td>
<td><input type="text" name="store_id1">
<input type="text" name="store_name1"></td>
<td>[<a href="#">検索</a>]</td>
</tr>
</tbody>
</table>
</div>

<table>
<tr>
<td>
<input type="button" id="addrow" value="行を追加" onclick="hoge(true);">
</td>
<td>
<input type="button" id="delrow" value="行を削除" onclick="hoge();" disabled="true">
</td>
<td>
<input type="button" value="登録" onclick="result()">
</td>
</tr>
</table>
</form>

</body>

投稿日時 - 2011-05-09 23:16:38

お礼

ありがとうございます。本当に感謝しております。
下記の用に変更をして無事に解決することができました。
PHPで配列として取得したいので「name="store_id[]"」に変更をしてみました。

//1行追加
 if(flag){
  tr = tr[0].cloneNode(true);
  tr.setAttribute("id", "histrow" + n);
  tbody.appendChild(tr);
  tr.cells[0].innerHTML = n;
  input = tr.getElementsByTagName("input");
  for(i=0; i<2; i++){
   input[i].value = "";
   //input[i].setAttribute("name", "store"+ ["id","name"][i] + n);
input[i].setAttribute("name", "store"+ ["_id","_name"][i] + "[]");
input[i].setAttribute("id", "sto"+ ["_id","_name"][i] + n);
  }
<!-- html箇所 -->
<tbody id="histTablebody">
<tr id="histrow1">
<td>1</td>
<td>店舗ID</td>
<td><input type="text" name="store_id[]" class="store_id1" value="<?php echo $_GET['store_id'] ?>" size=16 maxlength=10>
<input type="text" name="store_name1[]" class="store_name1" value="<?php echo $store['store_name'] ?>" size=32>&nbsp;[<a href="#">検索</a>]</td>
</tr>
</tbody>

もう一点だけ質問が有るのですがよろしいでしょうか。
「name="store_id[]"」にした為、上記が親ウインドウだとすると子ウインドウ下記なのですが、
うまく取得できなくなってしまいました。
「input[i].setAttribute("id", "sto"+ ["_id","_name"][i] + n);」
を追加をしてIDで値を取得することは可能でしょうか?

<子ウインドウ>
[<a href="#" onClick="window.opener.parent.content.document.register.store_id<?php echo $number ?>.value='<?php echo $store['store_id'] ?>';
window.opener.parent.content.document.register.store_name<?php echo $number ?>.value='<?php echo $store['store_name'] ?>';
window.close()">登録画面にコピー</a>]

投稿日時 - 2011-05-10 15:06:40

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

>「この部分」
最初の例示では、no=「この部分」になっているけれど、ソースの方を見るとno=[]となっているので、どちらが正なのだろうか?
また、ソースでno=[1]になってないけれど、最初に記述してあるリンクだけはno=[]が正解?
一方、ご提示のスクリプトでは、同じidの要素をつくりまくってしまうように見えるけれど、本来idは一意のはず。


他の部分が分からないけど、idは無くてもいけそうなのでいらないidは勝手に削除して、かなり曲解してこんなのでは?
idが必要なら、定義し直せばいいので、適当に修正してください。
(hage()とhige()はまとめてhoge()にしちゃっています)

(全角空白は半角に)
<script language="JavaScript">
<!--
var maxrows = 10; //最大行数

function hoge(flag){
 var tbody = document.getElementById("histTablebody"),
   tr = tbody.getElementsByTagName("tr"),
   n = tr.length + (flag?1:-1),
   i, input;

//1行追加
 if(flag){
  tr = tr[0].cloneNode(true);
  tbody.appendChild(tr);
  tr.cells[0].innerHTML = n;
  input = tr.getElementsByTagName("input");
  for(i=0; i<2; i++){
   input[i].value = "";
   input[i].setAttribute("name", "store_"+ ["id","name"][i] + n);
  }
  tr.cells[3].getElementsByTagName("a")[0].onclick = (function(k){
   return function(){ w_open(k); };
  })(n);
 } else {
//1行削除
  tbody.removeChild(tr[n]);
 }

//ボタンの有効/無効処理
 document.getElementById("addrow").disabled = n>=maxrows;
 document.getElementById("delrow").disabled = n<2;
}

var result = function() {
alert('');
}

function w_open(n){
 var url = "store1.php?from=js&amp;no=[" + n + "]";
 window.open(url, "search_store1", "width=540,height=540");
}
//-->
</script>
</head>
<body>

<form name="register">

<div id="hist">
<table border="1">
<tbody id="histTablebody">
<tr>
<td>1</td>
<td>店舗ID</td>
<td><input type="text" name="store_id1">
<input type="text" name="store_name1"></td>
<td>[<a href="#" onclick="w_open(1);">検索</a>]</td>
</tr>
</tbody>
</table>
</div>

<table>
<tr>
<td>
<input type="button" id="addrow" value="行を追加" onclick="hoge(true);">
</td>
<td>
<input type="button" id="delrow" value="行を削除" onclick="hoge();" disabled="true">
</td>
<td>
<input type="button" value="登録" onclick="result()">
</td>
</tr>
</table>

</form>

</body>

投稿日時 - 2011-05-09 21:37:14

あなたにオススメの質問