时间戳

首页 > 解决方案 > 单击按钮时表格会相互叠加

javascript - 单击按钮时表格会相互叠加

问题描述

我有一个输入字段，我在其中输入 ID 并在单击按钮时调用一个函数，并且从 csv 文件中获取具有相应 ID 的内容并填充到表中。问题是当我在输入字段中再次输入 ID 时，我希望之前的表被销毁，并且必须创建与该 ID 对应的新表，但新表会附加到现有表的下方。我该如何解决？

 <div id="table-scroll" class="table-scroll">
        <table id="data" class="main-table" style= "display: none;"></table>
    </div>

function buildrow1(){
////////////////TABLE BUILD//////////// 

var table = document.getElementById("data");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML="<td>Item1</td>";   
////////////////TABLE BUILD////////////


    //HPlans creating the columns for row
    
var l;
var m;
for (l = 0; l < pid.length; l++) {
    
    for(m=0; m < hmoplans_all ["data"].length; m++){
        if(hmoplans_all["data"][m]["Provider ID"]!==null){
        if(pid[l]==hmoplans_all["data"][m]["Provider ID"]){
        hmofirst_row="<td>"+hmoplans_all["data"][m]["Emp"]+"</td>";
        
            var table = document.getElementById("data");
            var cell1 = row.insertCell(1);
            cell1.innerHTML=hmofirst_row;
            //$("#data").append(hmofirst_row);  
        }
        }

        }
}
    //WPlans creating the columns for row
var j;
var k;
for (j = 0; j < bid.length; j++) {
    
    for(k=0; k < wplans_all ["data"].length; k++){
        if(wplans_all["data"][k]["Broker ID"]!==null){
        if(bid[j]==wplans_all["data"][k]["Broker ID"] || pid[j]==wplans_all["data"][k]["Provider ID"]){
        first_row="<td>"+wplans_all["data"][k]["Emp"]+"</td>";
        
            var table = document.getElementById("data");
            var cell1 = row.insertCell(1);
            cell1.innerHTML=first_row;
    
        }
        }

    }

}
    
    buildrow2();
}

标签： javascripthtmljquerycsshtml-table

解决方案

当您调用该函数来创建表格时，您要执行的第一行代码应该设置 innerHTML = " "。这样，每次调用该函数时，都会先清除该表，然后再创建另一个表。

推荐阅读