javascript自动排号(在线等 谢谢)

我想实现 假如通过javascript生成有编号的文本框 
1 文本框  删除按钮
2 文本框  删除按钮
3 文本框  删除按钮
4 文本框  删除按钮
后面都是有删除功能 我删除 第2个文本框的时候 后面的 3和4能自动编号更改为2和3然后我再添加文本框的时候 继续的编号应该是4了 而不应该是5 谢谢 

解决方案 »

  1.   


    <html>
    <head></head>
    <body>
    <div id="div1">
    <table id="tb1">

    </table>
    <input type="button" value="添加" id="btn1"/>
    </div>
    </body>
    <script type="text/javascript">
    var g=function(id){return document.getElementById(id);}var i=1;
    g("btn1").onclick=function() {
    tb=g("tb1");
    var tr=tb.insertRow(tb.rows.length);
    var td1=tr.insertCell(0);
    td1.innerHTML=i++;

    var td2=tr.insertCell(1);
    td2.innerHTML="<input type='text'/>";

    var td3=tr.insertCell(2);
    td3.innerHTML="<input type='button' value='移除' onclick='remove(this)' />";
    }
    var remove=function(btn) {
    var tr=btn.parentNode.parentNode;
    tr.parentNode.removeChild(tr);
    }
    </script>
    </html>
      

  2.   

    这个样子的我可以弄 关键是编号!  如果删除了 编号为2的text 那么 后面的text需要缩进上来 让编号 保持是 不间断了 
    例如 
    1  text1 内容是 1
    2  text2 内容是 2
    3  text3 内容是 3
    4  text4 内容是 4
     
    操作 删除 2 现在结果是1  text1 内容是 1
    3  text3 内容是 3
    4  text4 内容是 4操作 删除 2 希望得到结果是1  text1 内容是 1
    2  text2 内容是 3
    3  text3 内容是 4
      

  3.   

    看错题目了<html>
    <head></head>
    <body>
    <div id="div1">
    <table id="tb1">

    </table>
    <input type="button" value="添加" id="btn1"/>
    </div>
    </body>
    <script type="text/javascript">
    var g=function(id){return document.getElementById(id);}g("btn1").onclick=function() {
    tb=g("tb1");
    var tr=tb.insertRow(tb.rows.length);
    var td1=tr.insertCell(0);
    td1.innerHTML=tb.rows.length;

    var td2=tr.insertCell(1);
    td2.innerHTML="<input type='text'/>";

    var td3=tr.insertCell(2);
    td3.innerHTML="<input type='button' value='移除' onclick='remove(this)' />";
    }
    var remove=function(btn) {
    var tr=btn.parentNode.parentNode;
    var next=tr.nextSibling;
    while(next) {
    next.cells[0].innerHTML=next.rowIndex;
    next=next.nextSibling;
    }
    tr.parentNode.removeChild(tr);
    }
    </script>
    </html>
      

  4.   

    文本框 里填值了再移动，否则感觉跟没移动一样<html>
    <head></head>
    <body>
    <div id="div1">
    <table id="tb1">

    </table>
    <input type="button" value="添加" id="btn1"/>
    </div>
    </body>
    <script type="text/javascript">
    var g=function(id){return document.getElementById(id);}g("btn1").onclick=function() {
    tb=g("tb1");
    var tr=tb.insertRow(tb.rows.length);
    var td1=tr.insertCell(0);
    td1.innerHTML=tb.rows.length;

    var td2=tr.insertCell(1);
    td2.innerHTML="<input type='text'/>";

    var td3=tr.insertCell(2);
    td3.innerHTML="<input type='button' value='移除' onclick='remove(this)' />";

    var td4=tr.insertCell(3);
    td4.innerHTML="<img src='http://dl.getdropbox.com/u/2555620/icons/arrow_up.png'/>";
    td4.style.cssText="padding:0 20px;cursor:pointer";
    td4.onclick=function() {
    var tr=this.parentNode;
    tr.parentNode.insertBefore(tr,tr.previousSibling);
    reNum(tb);
    }

    var td5=tr.insertCell(4);
    td5.innerHTML="<img src='http://dl.getdropbox.com/u/2555620/icons/arrow_down.png'/>";
    td5.style.cssText="padding:0 20px;cursor:pointer";
    td5.onclick=function() {
    var tr=this.parentNode;
    if(tr.nextSibling)
    tr.parentNode.insertBefore(tr.nextSibling,tr);
    else
    tr.parentNode.insertBefore(tr,tr.parentNode.firstChild);
    reNum(tb);
    }
    }
    var reNum=function(tb) {
    for(var i=0;i<tb.rows.length;i++) {
    tb.rows[i].cells[0].innerHTML=(i+1);
    }
    }
    var remove=function(btn) {
    var tr=btn.parentNode.parentNode;
    var next=tr.nextSibling;
    while(next) {
    next.cells[0].innerHTML=next.rowIndex;
    next=next.nextSibling;
    }
    tr.parentNode.removeChild(tr);
    }
    </script>
    </html>
      

  5.   

    虽然结贴了 但也做了一个 参考 呵呵
    <html><head><title></title>
    <script type="text/javascript">
    function $(elem)
    {
    return document.getElementById(elem);
    }
    var num=1;function addd()
    {
    var tab=$("tb");
    var row=tab.insertRow(-1);
    row.id="row"+num;
    var cell1=row.insertCell(-1);
    var cell2=row.insertCell(-1);
    var cell3=row.insertCell(-1);
    cell1.innerHTML=num;
    cell2.innerHTML="<input type='text'>";
    cell3.innerHTML="<input type='button' onclick='del("+num+")' value='delete' >";
    num++;
     for(var i=0;i<tab.rows.length;i++)
        {
            
            tab.rows[i].cells[0].innerText=i+1;
            
        }
    }function del(num)
    {
      
        var row=$("row"+num);
        var tab=$("tb");    
        tab.deleteRow(row.rowIndex);
        for(var i=0;i<tab.rows.length;i++)
        {
            
            tab.rows[i].cells[0].innerText=i+1;
            
        }
    }
    </script>
    </head><body>
    <table id="tb" border=1>
    </table>
        <input type="button" value="add" id="ok" onclick="addd();"/>
    </body></html>