Question

我想动态更改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>

Answer 1

您获得ID为old_id的元素，然后将其ID设置为new_id。

然后你得到ID为new_id的元素。这与上面的元素相同（因为您只需将其ID设置为new_id）。然后，再次将此元素ID设置为old_id。

div_node和div_node1是相同的元素。您只需交换ID，然后将其交换回来。

Answer 2

你有ID碰撞吗？每个ID在页面上应该是唯一的。乍一看，我的代码中没有看到任何安全警卫。

为了排除这些问题，您还需要在动画制作之前更改ID。

动态更改TD标签的id不是永久性的

2 个答案: