Question

我试图删除a的内容，然后根据其点击内容重新填充。

我能够成功地用新标题修改，但是当我想要删除内容并用新标题替换时，我一直遇到问题。我已经尝试过执行removeChild（），replaceChild（）以及innerHTML（根据文档无法使用）。

如何成功单击，删除现有表，并使用从JavaScript生成的HTML重新填充它。

HTML：

<table id="captable" border = "5" width="100%" cellpadding="4" cellspacing="5">
   <thead>
      <tr>
         <th colspan="100%">
            <div id="table-title"></div>
         </th>
      </tr>
      <th>Input Date</th>
      <th>Requested Date</th>
   </thead>
   <tbody id="tbodyid">
      <div id="table-entries">
         <tr align = "center">
            <td>3/27/2018</td>
            <td>6/12/2018</td>
         </tr>
      </div>
   </tbody>
</table>

JavaScript：

   function(evt) {
       $("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
       var tBodyInner;
       for (i of dataPoints) {
           console.log("data" + i);
           var data = json.Data[i];
           tBodyInner += ("<tr align = \"center\">");
           tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");

           tBodyInner += ("</tr>");
       }
       //Not sure what to do here so that I clear the existing table, and appened the new tBodyInner html as a replacement
       modal.style.display = "block";
   }

Answer 1

首先，您必须摆脱<div id="table-entries">，这不是DIV的有效位置。

第二，您需要将变量tBodyInner初始化为空字符串。

最后，您可以使用$("#tbodyId").html()来填充表格主体的HTML。

function(evt) {
  $("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
  var tBodyInner = "";
  for (i of dataPoints) {
    console.log("data" + i);
    var data = json.Data[i];
    tBodyInner += ("<tr align = \"center\">");
    tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");

    tBodyInner += ("</tr>");
  }
  $("#tBodyId").html(tBodyInner);
  modal.style.display = "block";
}

<table id="captable" border="5" width="100%" cellpadding="4" cellspacing="5">
  <thead>
    <tr>
      <th colspan="100%">
        <div id="table-title"></div>
      </th>
    </tr>
    <th>Input Date</th>
    <th>Requested Date</th>
  </thead>
  <tbody id="tbodyid">
    <tr align="center">
      <td>3/27/2018</td>
      <td>6/12/2018</td>
    </tr>
  </tbody>
</table>

Answer 2

您到底在哪里更改元素内的html？您正在设置变量tBodyInner，但从不使用它。您应该像更新上面的标题一样使用它，例如：

$("#table-entries").html(tBodyInner);

此外，右侧字符串concat周围的括号也是多余的。没有伤害，也没有影响。

删除表内容并使用JavaScript替换

2 个答案: