2011-12-15 6 views
0

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> 
+0

'jsAnimManager'とは何ですか? – Neal

+0

'jsAnim.js'とは何か、コードを外に出すことはできません。問題があるかもしれません。また、IDを交換するためのあなたの根拠は何ですか?なぜ授業だけではないのですか? (スタイル/位置?) – Jakub

+0

"Assign_ID()"関数でDOM要素の "id"を設定するために "setAttribute()"を使用しないでください。他のコードと同じように、オブジェクトに直接プロパティとして設定してください。 – Pointy

答えて

0

の利用可能なあなたは、IDの衝突を持っていますか?各IDはページ上で一意でなければなりません。一見すると、あなたのコードには安全なガードがありません。

アニメーション化する前にidを変更するだけで済みます。

1

IDがold_idの要素を取得し、IDをnew_idに設定します。

次に、IDがnew_idの要素を取得します。これは上記と同じ要素です(IDをnew_idに設定しただけです)。次に、この要素IDをold_idに再度設定します。

div_nodediv_node1は同じ要素です。あなたはIDを交換した後、それを元に戻します。

+0

私のchange_id関数を変更したあなたの提案によると、次のように ですが、そのIDは変更されません var div_node; \t \t \t VaRのTEMP = "0" \t \t \t div_node =のdocument.getElementById(old_id)。 \t \t \t div_node.id = temp; \t \t \t \t \t \t var div_node1 = document.getElementById(new_id); \t \t \t div_node1.id = old_id; \t \t \t \t \t \tするvar div_node2 =のdocument.getElementById(TEMP)。 \t \t \t div_node2.id = new_id; \t \t \t \t \t \t alert(div_node2.id); \t \t \t alert(div_node1.id); \t \t} –

関連する問題