如何在每个列的自定义html的jquery数据表中添加一行，在单独的文件中保留模板和javascript代码中的html代码？

Question

我有一个数据表。我想简单地添加一行或动态删除。为了删除行，我们只需使用fnRowDelete（）函数，这使得所有任务都变得简单。

<table>
  <tr>
    <td><p>sr no</p></td>
    <td><div>First name</div></td>
    <td><div>Last name</div></td>
  </tr>
</table>

但是，使用fnAddData（1，“john”，“doe”）添加新行可以完成这项工作，但它会通过直接在标记内添加此数据而不添加自定义html来添加行。

<table>
  <tr>
    <td>1</td>
    <td>john</td>
    <td>doe</td>
  </tr>
</table>

在这里，我想添加这个行的html标签。如果我们在函数fnAddData（）中将html作为字符串传递以获得所需的输出，我们将无法将javascript和html代码分开（使用模板）。

有什么方法我可以将javascript和html代码保存在不同的文件中，并且仍然能够以所需的格式添加一行。

所需样本输出： -

<table>
  <tr>
    <td><p>1</p></td>
    <td><div>john</div></td>
    <td><div>doe</div></td>
  </tr>
</table>

Answer 1

更好的方法是将自定义模板添加到数据表行。

 "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Click!</button>"
    } ]

当Data为null时，它将从默认模板中获取。如果需要，可以根据需要使用模板格式化数据。

Answer 2

使用.html()追加。像这样

$( "td" ).html( "<p>+'jsonData.Number'+</p>" );