关于js中相加的问题

<input name="abc" id="abc1" type="text" /><input name="abc" id="abc2" type="text" /><input name="abc" id="abc3" type="text" />要求是，通过上面的js，循环将对象的ID替换，每个ID+1，结果应该为：<input name="abc" id="abc2" type="text" /><input name="abc" id="abc3" type="text" /><input name="abc" id="abc4" type="text" />
我使用的方法无法相加。。

for(var i=0 ;i<10;i++){
var now_id="abc"+i;
var new_id="abc"+(i*1+1);
document.getElementById(now_id).id=new_id;
alert(document.getElementById(now_id).id);
}

难道你这样给ID赋值， ID不会重复吗？当i=1 ,给abc1 赋值的时候abc1的 ID变成abc2，就和abc2的ID冲突了！！！重新考虑一下设计思路吧！！

for(var i=10 ;i<0;i++){
document.getElementById("abc"+i).id= "abc"+(i*1+1);
}
这就不会冲突了

for(var i=0 ;i<10;i++){
document.getElementById("abc"+i).id= "abc"+(i*1+1); //此处需要做的是更换ID，但是这样相加好像不正常
}
for(var i=0 ;i<10;i++){
$("#"+("abc"+i)).attr("id",("abc"+(i*1+1)));
alert$("#"+("abc"+i)).attr("id");}

for(var i=0 ;i<10;i++){
$("#"+("abc"+i)).attr("id",("abc"+(i*1+1)));
alert($("#"+("abc"+i)).attr("id"));
}
刚才alert少加括号了

逻辑不通
当进入循环，第一次，你把id = abc1改成abc2，
进入第二次循环，这时页面上会有两个id=abc2的input，就混乱了。
像你举的例子，可以考虑用name="abc"做
<input name="abc" id="abc1" type="text" /><input name="abc" id="abc2" type="text" /><input name="abc" id="abc3" type="text" />
<script type="text/javascript">
var obj = document.getElementsByName("abc"),rt=[];for(var i=0,j=obj.length;i<j;i++)
{
obj[i].id = obj[i].id.replace(/^abc(\d+)$/,function(){return "abc" + (parseInt(arguments[1]) + 1) });
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
function chan()
{
var count=document.getElementsByName("abc");
var ts=count[0].id.substring(3,count[0].id.length);
var s=parseInt(ts,10);
alert(s);
alert(count.length);
for(var i=s,j=0;i<s+count.length;i++,j++)
{
count[j].id="abc"+(i*1+1);
}
}
</script>
<BODY>
  <input name="abc" id="abc1" type="text" value="1"/><input name="abc" id="abc2" type="text" value="2"/><input name="abc" id="abc3" type="text" value="3"/>
<input name="xx" value="show" type="button" onclick="chan()"/>
</BODY>
</HTML>

简单的意见：
i值从10到0逐减取值，避免id重复

for(var i=10 ;i>0;i--){
document.getElementById("abc"+i).id= "abc"+(i*1+1);
}

我这个比较折腾。。因为HTML中需要js产生新的div，包括div内的input都是动态的，会在当前的div紧跟之后产生。所以比如我选择在div1后，点击div1里面的新增，那么紧跟着div1后面出来一个div10（假定之前一共有div1-div9），现在需要将新的div10（包括里面的所有对象的ID）都替换为div2（因为按照实际顺序，它处于第二个），那么之前存在的div2-div9，应该按照顺序循环替换，变成div3-div10我现在做的是先将div2-div9的ID替换，然后接下来一步再将div10替换为div2折腾了很多，但是不知道怎么做，呵呵原始：<div id="A1">……</div> ---点击ID=A1内的新增后，在这个后面会产生id=A10的div<div id="A10"></div> ---这个是上面点击新增后出来的，但是按照顺序，应该变为ID=A2<div id="A2">……</div> --从这里开始，到最后的ID=A9，都应该ID+1 ……<div id="A9">……</div>

而且实际上，不是从1开始的因为如果我在第一个div内点新增产生新的div，那么应该是从2开始，2-9更换ID。。

先把你这么做的目的说清楚，动态产生div，动态的改变每个div的id，而且还是按照顺序来重新排序，这么做是为了什么？记住每个div的位置？
把你这么做的目的讲清楚，说不定有其他更好的解决方案，你这种不断的更改元素ID的方式，很让人费解！而且极容易出错！

的确是很复杂，我越弄越复杂。要求是这样：HTML内，js数组动态产生表单内容，这里面每一个DIV，或者说每一个表格，都包含了新增、删除按钮
如果点击新增，会在当前表格后，插入一个新的表格--这些现在用很折腾的办法都做到了问题就是：在当前表格后新产生的表格，它的所有对象的ID，都是最后的。如上面所说，假定默认产生了10个表格，现在要在第一个表格后，新插入表格，它的ID应该为2。我现在做的是，新插入的表格，ID=11。但是我又必须按照表格在HTML中的实际排序来保存表单。所以--可能是我异想天开--我对JS不懂，所以做到现在这个程度是，新插入的表格，我用比较笨的办法实现可以将它的ID更换为其实际排序的ID。但是对于已有的表格，如果不更换ID，就会出现重复ID了。所以就出现了这个问题。。可能是思路不对。我也想不到更好的办法，js一窍不通 :(

10个表格，1，2，3，4，5，6，7，8，9，10 ，现在在1后面新增一个，就是 1，11，2，3，4，5，6，7，8，9，10，你在2后面新增一个，就是1，11，2，12，3，4，5，6，7，8，9，10，保存的时候，你直接根据ID累加，来获取数值，这样的话，你新增的11和12的值就跑后面去了，而11和12在表单上真正的位置是2，4位置，所以你就想，每新增一个，就把表单上所有ID重新赋值，达到id顺序和表单上的排列顺序一致，是这个意思么？
可以这样做，弄一个变量，记录下当前10个div的id，"abc1，abc2，abc3，abc4，abc5，abc6，abc7，abc8，abc9，abc10",当你新增了一个之后，那你就在当前div的后面，把新增的ID加入，如在abc2后面新增了一个abc11，那么就在字符串中，“abc2，”得后面插入一个“abc11，”变成"abc1，abc2，abc11，abc3，abc4，abc5，abc6，abc7，abc8，abc9，abc10"，当然，页面上div的新增删除操作，都要去维护这个序列。你也可以用数组，每次动态改变数组值。只要保证能按照顺序获取到值就行了

我的代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body onload="setFileFileds(3);">
<div id="show"></div>
<script language="javascript" type="text/javascript">
    function insertAfter(newElement,targetElement) {  var parent = targetElement.parentNode;  if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素，则直接添加。因为默认是最后    parent.appendChild(newElement);  } else {    parent.insertBefore(newElement,targetElement.nextSibling);//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。  }}//新增
function addnew(tbn){

             if(window.confirm('确定新增一行吗？')){
                 //alert("确定");
  addnt([tbn]);              }else{
                 //alert("取消");
             }
}//删除层及相关表格
function delit(tbn){

             if(window.confirm('按确定按钮删除')){
                 //alert("确定");
  var deldiv = document.getElementById([tbn]);
  //deldiv.style.display = "none"; //隐藏而不删除
  deldiv.parentNode.removeChild(deldiv); //删除
              }else{
                 //alert("取消");
             }
}
</script><script language="javascript" type="text/javascript">
function addnt(tbn){    var nowtab=document.getElementById([tbn]).outerHTML;
    var re = new RegExp(tbn,"g");
    nowtab = nowtab.replace(re, "tb00" +last);

var newE = document.createElement("DIV");

newE.id = ("tb00" +last);

newE.innerHTML = "<div id=\"tb00"+last+"\"><table width=\"695\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td height=\"25\" colspan=\"3\"><div style=\" float:left\"><input class=\"adtoolbtn\" type=\"button\" value=\"+ ADD\" onclick=\"addnew(\'tb00"+last+"\')\"> <input type=\"button\" value=\"- DEL\" class=\"adtoolbtn\"  onclick=\"del(\'tb00"+last+"\')\"><\/div><\/td><\/tr><\/table><\/div>";

   var gotarget = document.getElementById([tbn]);   insertAfter(newE,gotarget);

   last=last+1;
}
</script><script language="javascript" type="text/javascript">

</script>
</body>
</html>

调试易

关于js中相加的问题

解决方案 »