Javascript 如何更改文本框的ID

我试图在运行时根据运行时的输入创建多个文本框以及一个复选框和一个按钮

用户可以通过按按钮删除文本框以及复选框和按钮

这个很好用

如果用户通过按下按钮删除其中一个文本框和复选框，那么所有剩余的ID都应该向上移动一个值

这部分工作不正常

for(i = 0; i <= k; i++) { 
    if (document.getElementById("cbox" + i).checked == true) { 
        var n = i.toString()   
        var textbox = document.createElement('input');
        textbox.type = 'text'; 
        textbox.id = "tbox" + i;
        textbox.value = document.getElementById("texts" + i).value;    

        document.getElementById('frm').appendChild(textbox);

        var cb = document.createElement('input');
        cb.type = 'checkbox';
        cb.checked = true;  
        cb.id = 'cbid' + i;
        document.getElementById('frm').appendChild(cb);    

        var btn = document.createElement('input');     
        btn.type = 'button';    
        btn.value = 'delete';   
        btn.name = 'delete';    
        btn.id = i.toString();  
        btn.onclick = function () {    
            var tbx = "tbox" + this.id;
            var cbx = "cbid" + this.id;
            var btndel = this.id;
            var x;                  

            (elem = document.getElementById(tbx)).parentNode.removeChild(elem);
            (elem = document.getElementById(cbx)).parentNode.removeChild(elem);
            (elem = document.getElementById(btndel)).parentNode.removeChild(elem);                

            for(x = btndel + 1; x <= 10; x++) { 
                document.getElementById('tbox' + x).id = "tbox" + (x - 1);
                document.getElementById("cbid" + x).id = "cbid" + (x - 1);
                document.getElementById(x).id = x - 1;
            }

            document.getElementById('frm').appendChild(btn);
        };

---

for（i=0；i您可以通过jQuery轻松实现它

//HTML:
<div id="generatedElements"><p></p></div>

//jQuery
<script>
    $(document).ready(function(){
        var NoElems =3;
        var Str ="";
        for(var i =0; i<NoElems; i++)
            Str = Str + "<input type='checkbox' id='check"+i+"'/><input type='text' id='text"+i+"'/><br/>";
        $("#generatedElements p").html(Str);
    });
</script>

//HTML：

//jQuery
$（文档）.ready（函数（）{
var NoElems=3；
var Str=“”；
对于（var i=0；i您必须维护全局变量，该变量将包含文本框总数及其复选框

var gCount = 0;
for (i = 0; i <= k; i++) {
    if (document.getElementById("cbox" + i).checked == true) {
        var n = i.toString()
        var textbox = document.createElement('input');
        textbox.type = 'text';
        textbox.id = "tbox" + i;
        textbox.value = document.getElementById("texts" + i).value;
        document.getElementById('frm').appendChild(textbox);
        var cb = document.createElement('input');
        cb.type = 'checkbox';
        cb.checked = true;
        cb.id = 'cbid' + i;
        document.getElementById('frm').appendChild(cb);
        var btn = document.createElement('input');
        btn.type = 'button';
        btn.value = 'delete';
        btn.name = 'delete';
        btn.id = i.toString();

        //increment count
        gCount++;
        btn.onclick = function() {
            var tbx = "tbox" + this.id;
            var cbx = "cbid" + this.id;
            var btndel = this.id;
            var x;
            (elem = document.getElementById(tbx)).parentNode.removeChild(elem);
            (elem = document.getElementById(cbx)).parentNode.removeChild(elem);
            (elem = document.getElementById(btndel)).parentNode.removeChild(elem);
            for (x = 0; x < gCount; x++) {
                document.getElementById('tbox' + x).id = "tbox" + x;
                document.getElementById("cbid" + x).id = "cbid" + x;
                document.getElementById(x).id = x;
            }
            document.getElementById('frm').appendChild(btn);
        };

var gCount=0；
对于（i=0；i
var totalElem=20
对于（i=0；我建议不要以这种方式使用ID，构建字符串，分配它们，然后重新分配。有更好的方法来跟踪元素。我完全同意@torazaburo，但如果我幽默的话，你甚至有一个数值吗？看起来你对ID的约定是
tbox1
or类似的东西，那么如何使用
i=tbox1
启动for循环呢？btndel是一个数值，感谢您的帮助，使用parseInt（btndel）工作正常。
  var totalElem = 20
        for (i = 0; i <= totalElem; i++) {
            if (document.getElementById("cbox" + i).checked == true) {
                var n = i.toString()
                var textbox = document.createElement('input');
                textbox.type = 'text';
                textbox.id = "tbox" + i;
                textbox.value = document.getElementById("texts").value;
                document.getElementById('frm').appendChild(textbox);
                var cb = document.createElement('input');
                cb.type = 'checkbox';
                cb.checked = true;
                cb.id = 'cbid' + i;
                document.getElementById('frm').appendChild(cb);
                var btn = document.createElement('input');
                btn.type = 'button';
                btn.value = 'delete';
                btn.name = 'delete';
                btn.id = i.toString();
                btn.onclick = function () {
                    var tbx = "tbox" + this.id;
                    var cbx = "cbid" + this.id;
                    var btndel = this.id;
                    var x = btndel;
                    (elem = document.getElementById(tbx)).parentNode.removeChild(elem);
                    (elem = document.getElementById(cbx)).parentNode.removeChild(elem);
                    (elem = document.getElementById(btndel)).parentNode.removeChild(elem);
                    for (x = parseInt(btndel) + 1; x <= totalElem; x++) {
                        document.getElementById('tbox' + x).id = "tbox" + (x - 1);
                        document.getElementById("cbid" + x).id = "cbid" + (x - 1);
                        document.getElementById(x).id = x - 1;
                    }
                    totalElem -= 1;

                };
                document.getElementById('frm').appendChild(btn);

            }
        }