如何在带有自定义html的jquery数据表中为每一列添加一行，从而将html代码保留在模板中并将javascript代码保留在单独的文件中？

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为空，它将取自默认模板。 如果需要，可以根据需要使用模板格式化数据。

Answer 2

使用.html（）附加。 像这样

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