Question

我有一张表，其中第一行是标签，并且用于选择空格数。根据选择的数量，在大量行中，每行内部会有另一个带输入字段的表。第一次使用就行了。但是当我从下拉列表中重新选择数字时，行数会附加到前一行。我想替换以前的内部表。怎么做。

这是我的HTML代码

<table  border="1" style="border-style:dotted" width="100%" id="table_booking">
    <tr>
        <td>
            <label > Number Of Spaces</label>
        </td>
        <td>
            <select id="dropdown" class="" name="spaces" onchange="addForm(this.value)">
                <option selected="selected" value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </td>
    </tr>
    <table  border="1" style="background-color:gray" width="100%" id="table_form">
    </table>
</table>

这是脚本

<script type="text/javascript">
    function addForm(space)
    { var val=space;
        document.getElementById('dropdown').value =val;
        var doc=document.getElementById('table_booking');
        for(var i=0;i<val;i++)
            doc.innerHTML += '<tr><td><table width="100%" id="table_form"><tr><td><form><label>Name </label><input type="text"></form></td></tr></table></td></tr>';
    }
</script>

Answer 1

在追加之前，只需刷新现有的innerHTML，如

doc.innerHTML = '';

然后追加它，

for(var i=0;i<val;i++)
  doc.innerHTML += '<tr><td><table width="100%" id="table_form"><tr><td><form><label>Name </label><input type="text"></form></td></tr></table></td></tr>';

更新：在其他答案中查看您的评论，我设计了以下方法，

 function addForm(space) {
     var val = space;
     var doc = document.getElementById('table_booking').getElementsByTagName('tbody')[0];

// Remove nodes whenever we append new nodes to the tbody (RESET)

     if (doc.getElementsByTagName('tr').length > 1) {
         var len = doc.getElementsByTagName('tr').length;
         for (i = (len - 1); i >= 1; i--) {
             doc.getElementsByTagName('tr')[i].remove();
         }
     }

// Based on the value selected, new rows will be appended to the tbody

     for (var i = 1; i <= val; i++) {
         t = doc;
         r = t.insertRow(i);
         c = r.insertCell(0);
         c.innerHTML = "<form><label>Name </label><input type='text'></form>";
         doc.appendChild(r);
     }
 }

替换innerHtml而不是追加

1 个答案:

JSFiddle