Question

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

按下按钮，用户可以选择删除文本框以及复选框和按钮。

这很好用。

如果用户通过按下按钮删除其中一个文本框以及复选框，则所有剩余的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);
        };

Answer 1

你可以通过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>

Answer 2

您必须维护全局变量，该变量将包含总TextBox及其CheckBox的计数。

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);
        };

Answer 3

  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);

            }
        }

如果有帮助的话，试试这个

如何更改文本框的ID

3 个答案: