如何使用JQuery .append()方法添加包含html的字符串?

时间:2019-05-22 13:35:23

标签: jquery html append

我创建了一个带有搜索表单的html页面,并且我希望在用户单击“搜索”按钮时显示一个包含一些数据的表。

我想使用JQuery显示此类数据,而不是插入静态html <tr>。我想利用.append()方法添加一个包含<td>和数据的字符串。

所以我做了以下事情:

我复制粘贴了表的引导程序代码并清空了<tbody>,因此如果不返回结果,表将不会显示任何行。

我给<tbody>

提供了ID

这是html代码:

<table id="tabella" class="table hide">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nome</th>
      <th scope="col">Cognome</th>
      <th scope="col">Indirizzo</th>
    </tr>
  </thead>
  <tbody id="tbody">
<!-- 

    <tr>
      <th scope="row">1</th>
      <td>Maria</td>
      <td>Ottone</td>
    </tr>


    <tr>
      <th scope="row">2</th>
      <td>Giacomo</td>
      <td>Troisi</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lorenza</td>
      <td>Pieri</td>
    </tr>

 <-->

  </tbody>
</table>

我现在需要做的是使用JQuery <tr>方法将表的第一个<tbody>(先前已删除)附加到.append(),就好像它是一个字符串一样,通过选择<tbody>的ID。

function validateNome(){
  console.log('function validateNome has been activated');

  if ($("#inlineFormInputNome").val()=="") {
      $("#errorLog").show();    
  } else {          
    $("#errorLog").hide();    
    $("#cercaNome").prop("disabled", true);     
    setTimeout(function (){              
      $("#tabella").show();    

//我应该在下一行的括号内写什么?

      $("#tbody").append("        ");

       $("#cercaNome").prop("disabled", false);    
    } , 2000);
  }
}

这就是说:是否可以将JQuery中的append()方法和html()方法结合在一起? 要么: 如何使用JQuery .append()方法添加包含html代码的字符串?

1 个答案:

答案 0 :(得分:1)

您可以尝试以下操作:

 $("#tabella tbody").append('<tr><th scope="row">2</th><td>Giacomo</td><td>Troisi</td>/tr>');

它将在表格中最后一个<tr>之后添加<tr>