javascript でリンクを動的に変更する方法
下記のようなシステムを作成をしようと思っています。
javascript がまだあまり理解していない為ご教授いただければ幸いです。
質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。
下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。
<a href="#" onClick="window.open('store1.php?from=js&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&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>
お礼
ありがとうございます！まさか属性は大文字と小文字を間違えると指定できないとは思いませんでした。うまくいきました。