Question

我是网络开发的新手，并且正在努力删除动态创建的表格。

以下是用户点击按钮时创建表格的JavaScript函数。

function DrawTable(data){
                  var oTHead = myTable.createTHead();
                  var oTFoot = myTable.createTFoot();
                  var oCaption = myTable.createCaption();
                  var oRow, oCell;
                  var i, j;

                  var heading = new Array();

                  heading[0] = "AAA";
                  heading[1] = "BBB";
                  heading[2] = "CCC";
                  heading[3] = "DDD";
                  var tableData = data.split(':');

                  // Insert a row into the header.
                  oRow = oTHead.insertRow(-1);
                  oTHead.setAttribute("bgColor","lightskyblue");

                  // Insert cells into the header row.
                  for (i=0; i < heading.length; i++)
                  {
                    oCell = oRow.insertCell(-1);
                    oCell.align = "center";
                    oCell.style.fontWeight = "bold";
                    oCell.innerHTML = heading[i];
                  }

                   // Insert rows and cells into bodies.
                  for (i=0; i < tableData.length; i++)
                  {
                    var oBody = oTBody0;
                    oRow = oBody.insertRow(-1);
                    var splitData = tableData[i].split(',');
                    for (j=0; j < splitData.length; j++)
                    {
                      oCell = oRow.insertCell(-1);
                      oCell.innerHTML = splitData[j];
                    }
                  }
            }

以上代码完美运行，并在用户点击按钮时绘制表格。

如果用户再次点击该按钮，它将再次绘制该表。

即，它将再次绘制另一个标题和所有行。

此时我想删除现有的标题和行并将其全部绘制出来。

我尝试了很多东西来删除现有的表格，但没有任何作用。

有没有办法可以确保表格不会再次重复？

更新

HTML部分是：

<table id="myTable">
                <tbody ID="oTBody0"></tbody>
            </table>

另一个更新

我在下面尝试过它。

oTHead.innerHTML = "";
oTBody0.innerHTML = "";

Answer 1

jQuery提供了一个.empty()函数，您可以使用

$("#myTable").empty();

或者使用javascript，您可以将innerHTML设置为空

document.getElementById("myTable").innerHTML = "";

在开始尝试向表中添加新内容之前，只需执行此功能。

//$("#myTable").empty();
document.getElementById("myTable").innerHTML = "";

// Insert a row into the header.
oRow = oTHead.insertRow(-1);
oTHead.setAttribute("bgColor","lightskyblue");

// Insert cells into the header row.
for (i=0; i < heading.length; i++) {
    oCell = oRow.insertCell(-1);
    oCell.align = "center";
    oCell.style.fontWeight = "bold";
    oCell.innerHTML = heading[i];
}

Answer 2

由于您正在使用jQuery，请执行以下操作：$('#containerIdThatYourTableSitsIn').html('');

这将清除你的表所在元素的html。然后重新加载它。

修改

正如评论所提到的，.empty（）是另一种选择。

JavaScript：删除动态创建的表

2 个答案:

修改