Question

我使用javascript创建了动态元素。当我根据获得元素数量的值输入 int 值时，会创建这些元素。

我的问题是，如果我更改 int 值，则会添加更多元素，而我只想保留已在 int 字段中输入的元素数量。

请帮忙

Javascript 我使用

<script type="text/javascript">
    var inival = 0; // Initialise starting element number
    // Call this function to add textbox
    function addTextBox() {
        for (var i = 1; i <= document.getElementById('unit').value; i++) {

            if(document.getElementById("my"+i+"Div") != null){
                var child = document.getElementById("my"+i+"Div");
                alert(child);
                var parent = document.getElementById("area");
                alert(parent);
                alert(i);
                parent.removeChild(child);

            }

            var newArea = add_New_Element();
            var htcontents = "Unit"+i+": <input type='text' name='synchunit"+i+"' id='unit"+i+"'/>";
            document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents' 
        }
    }


    function add_New_Element() {
        inival = inival + 1; // Increment element number by 1
        var ni = document.getElementById('area');
        var newdiv = document.createElement('div'); // Create dynamic element
        var divIdName = 'my' + inival + 'Div';
        newdiv.setAttribute('id', divIdName);
        ni.appendChild(newdiv);
        return divIdName;
    }

    function removeElement(id){
        var child = document.getElementById(id);
        alert(child);
        var parent = document.getElementById('area');
        parent.removeChild(child);
        return true;              
    }

</script>

我称之为

的方式

<tr class="trlist1">
    <td style="border:0;">
        <input name="projectunit" id="unit" onblur="addTextBox();"/>
    </td>
</tr>
<tr>
    <td style="border:0;" align="center">
        <div id='area'>
        </div>      
    </td>
</tr>

Answer 1

我自己解决了这个问题

刚刚添加

function addTextBox() {
    document.getElementById("area").innerHTML = '';
    for (var i = 1; i <= document.getElementById('unit').value; i++) {

        var newArea = add_New_Element();
        var htcontents = "Unit"+i+": <input type='text' name='synchunit"+i+"' id='unit"+i+"'/>";
        document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents' 
    }
}

document.getElementById（“area”）。innerHTML ='';

此行只会重置div。

使用javascript基于表单字段中的某些值创建动态元素

1 个答案: