Question

我是JavaScript / html初学者，目前我正在处理以下问题：我有几个输入字段，由用户填写。当他填满田地时，他按下按钮并创建了几个表格。到目前为止一切正常。 BUT

如果我更新输入字段中的信息并按下按钮，则会创建新表格（前面的表格会保留，下面会添加新表格）

我的想法是追随：我把新表放在一个单独的div中。每次按下按钮，div信息都会被删除并再次创建。但由于我是初学者，我真的不知道该怎么做。

任何人都可以帮助我吗？

你有更好的主意吗？

我的代码（...）

/ 部分创建表 /

var zaehler=0;
for (zaehler = 0; zaehler < n; zaehler++){

tableCreate(n,zaehler,a,b,c,d,e,f,g,h,i,j,k,l);

    }}

/ 表创建函数 /`

<script>
    function tableCreate(maxyear,s4italka, a,b,c,d,e,f,g,h,i,j,k,l) {

    var imena  = ["Выручка", "Управляющая кампания", "Профилактика", "Налог на Недвижимость", "Страховка", "Амортизация", "Тело кредита", "%-ные выплаты банку", "%-ные выплаты себе", "Доход",
    "Налог (15%)", "Финансовый результат" ];

    var dannie =[a,b,c,d,e,f,g,h,i,j,k,l];



        var body = document.getElementsByTagName('body')[0];
        var tbl = document.createElement('table');
        tbl.style.width = '40%';
        tbl.setAttribute('border', '1');
        var tbdy = document.createElement('tbody');
        var trh = document.createElement('tr');
        var th = document.createElement('th');
        var m=s4italka+2015;
        th.appendChild(document.createTextNode('Результат на '+m+ ' год'))
        th.setAttribute ('colSpan','2');
        trh.appendChild(th)
        tbdy.appendChild(trh);
        for (var i = 0; i < 12; i++) {
            var tr = document.createElement('tr');
            for (var j = 0; j < 2; j++) {



                    var td = document.createElement('td');
                    if ((j % 2) != 0) 
                    {td.appendChild(document.createTextNode(dannie[i]))}
                    else {
                    td.appendChild(document.createTextNode(imena[i]))}

                    tr.appendChild(td)

            }

            tbdy.appendChild(tr);
        }
        tbl.appendChild(tbdy);
        body.appendChild(tbl)
       var p= document.createElement('p');
       body.appendChild(p);


    }

</script>

Answer 1

您必须先删除上一个表格。目前，您所拥有的代码只会将新表附加到正文，但所有以前的元素仍保留在那里。

删除上一张表：

jQuery的：

body.find("table").remove();

使用Javascript：

var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
    tables[i].remove();
}

您可以在行body.appendChild(tbl)

之前插入上面的代码

注意：即使在执行代码时表不存在，jQuery函数remove()也不会抛出错误。

Answer 2

 function tableCreate(maxyear, s4italka, a, b, c, d, e, f, g, h, i, j, k, l) {


       var imena = ["Выручка", "Управляющая кампания", "Профилактика", "Налог на Недвижимость", "Страховка", "Амортизация", "Тело кредита", "%-ные выплаты банку", "%-ные выплаты себе", "Доход",
       "Налог (15%)", "Финансовый результат"];

       var dannie = [a, b, c, d, e, f, g, h, i, j, k, l];


       $('.myTabel').remove();
       var body = document.getElementsByTagName('body')[0];
       var tbl = document.createElement('table');
       $(tbl).addClass('myTabel');
       tbl.style.width = '40%';
       tbl.setAttribute('border', '1');
       var tbdy = document.createElement('tbody');
       var trh = document.createElement('tr');
       var th = document.createElement('th');
       var m = s4italka + 2015;
       th.appendChild(document.createTextNode('Результат на ' + m + ' год'))
       th.setAttribute('colSpan', '2');
       trh.appendChild(th)
       tbdy.appendChild(trh);
       for (var i = 0; i < 12; i++) {
           var tr = document.createElement('tr');
           for (var j = 0; j < 2; j++) {



               var td = document.createElement('td');
               if ((j % 2) != 0)
               { td.appendChild(document.createTextNode(dannie[i])) }
               else {
                   td.appendChild(document.createTextNode(imena[i]))
               }

               tr.appendChild(td)

           }

           tbdy.appendChild(tr);
       }
       tbl.appendChild(tbdy);
       body.appendChild(tbl)
       var p = document.createElement('p');
       body.appendChild(p);
   }

如何通过单击按钮

2 个答案: