TDタグのIDを動的に変更したいと思います。私は以下を試しましたTDタグのIDを動的に変更することは永久的ではありません
var div_node;
div_node = document.getElementById(old_id);
div_node.id = new_id;
しかし、Idの変更の効果は永続的ではありません。この後いくつかの文を書くと元のIDだけが与えられます。私はアラート(div_node.id)をすれば、元のIdのみを与えることを意味します。
ここは私のプログラムです。
jsAnim.jsはjavascriptライブラリです。私はそれを含めた。 http://jsanim.com/
<html>
<head>
<script type="text/javascript" src="jsAnim.js"> </script>
<script>
function Assign_id() //This function Will execute onload
{
j=0;
for(i=1;i<4;i++)C
{
document.getElementsByTagName("td")[j].setAttribute("id",i);
//alert(document.getElementsByTagName("td")[j].id);
j++;
}
}
function getdata()
{
var old_id=prompt("Enter Box Id.");
var new_id=prompt("Enter New Position");
animate(old_id,new_id);
change_id(old_id,new_id);
}
function animate(old_id,new_id)
{
var manager=new jsAnimManager();
obj=document.getElementById(old_id);
obj.style.position="relative";
var anim=manager.createAnimObject(old_id);
anim.add({property: Prop.top, to: 100, duration: 2000});
anim.add({property: Prop.left, to: ((new_id-old_id)*50)+4, duration: 2000});
anim.add({property: Prop.top, to: 0, duration: 2000});
obj=document.getElementById(new_id);
obj.style.position="relative";
var anim=manager.createAnimObject(new_id);
anim.add({property: Prop.bottom, to: 100, duration: 2000});
anim.add({property: Prop.right, to: ((new_id-old_id)*50)+4, duration: 2000});
anim.add({property: Prop.bottom, to: 0, duration: 2000});
}
function change_id(old_id,new_id)
{
var div_node;
div_node = document.getElementById(old_id);
div_node.id = new_id;
alert(div_node.id); //HERE IT IS GIVING CORRECT CHANGED ID;
var div_node1 = document.getElementById(new_id);
div_node1.id = old_id;
alert(div_node.id); //BUT HERE IT AGAIN GIVE ORIGINAL ID ONLY
alert(div_node1.id);
}
</script>
</head>
<body onload="Assign_id()">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="100" background="pic.png">
<font size="10" align="center">A</font>
</td>
<td width="50" height="100" background="pic.png">
<font size="10" align="center">B</font>
</td>
<td width="50" height="100" background="pic.png">
<font size="10" align="center">C</font>
</td>
</tr>
</table>
<button onclick="getdata()"> NEXT </button>
</body>
</html>
'jsAnimManager'とは何ですか? – Neal
'jsAnim.js'とは何か、コードを外に出すことはできません。問題があるかもしれません。また、IDを交換するためのあなたの根拠は何ですか?なぜ授業だけではないのですか? (スタイル/位置?) – Jakub
"Assign_ID()"関数でDOM要素の "id"を設定するために "setAttribute()"を使用しないでください。他のコードと同じように、オブジェクトに直接プロパティとして設定してください。 – Pointy