从此自定义静态行生成行表

Question

我在使用表格中的JS创建一行时遇到了一些麻烦。我不知道为什么？

我的静态行：

<tr>
  <td>
    Bob
  </td>
  <td class="text-right text-nowrap">
    <button class="btn btn-xs btn-info">edit</button>
    <button class="btn btn-xs btn-warning">
      <span class="glyphicon glyphicon-trash"></span>
    </button>
  </td>
</tr>

第二个代码是在我的add函数中生成的：

let row = "<tr>"
    + "<td>"
       + "<a href='#'>"+ person.name +"</a>"
    + "</td>"
    + "<td class='text-right text-nowrap'>"
       +  "<button class='btn btn-xs btn-info'>edit</button>"
       +  "<button class='btn btn-xs btn-warning'>"
          +  "<span class='glyphicon glyphicon-trash'></span>"
       +  "</button>"
    +  "</td>"
    +  "</tr>"

Answer 1

表行周围没有div。你是如何从Javascript访问该表的？请参阅以下代码段。

我添加了

<div id = "table">

并使用

JQuery on ready function, 

等到页面加载， 并将该行附加到正确的表格＆＃34; div＆＃34;使用追加功能。

＆＃13;

＆＃13;

var row = "<tr>" +
    "<td>"
       + "<a href='#'> Aadi </a>"
    + "</td>"
    + "<td class='text-right text-nowrap'>"
       +  "<button class='btn btn-xs btn-info'>edit</button>"
       +  "<button class='btn btn-xs btn-warning'>"
          +  "<span class='glyphicon glyphicon-trash'></span>"
       +  "</button>"
    +  "</td>" + "</tr>"


    $( document ).ready(function() {
        $('#table tbody').append(row);
    });
    
    

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='table'>

<table>
 <tbody>
<tr>
  <td>
    Bob
  </td>
  <td class="text-right text-nowrap">
    <button class="btn btn-xs btn-info">edit</button>
    <button class="btn btn-xs btn-warning">
      <span class="glyphicon glyphicon-trash"></span>
    </button>
  </td>
</tr>
</tbody>
</table>
</div>

＆＃13;

＆＃13;

＆＃13;