如何使用Handlebar.js向表中添加行

How to add row into the table using Handlebar.js

本文关键字：添加行 js 何使用 Handlebar      更新时间：2023-09-26

我对handlebar.js完全陌生，所以需要专家的帮助来完成我的任务。

我有一个已经通过jsp创建的Html表。现在我如何使用handlebar.js动态添加新行到表?

Html结构
<table>
<tr>
<td class="one">one</td>
<td class="two">two</td>
<td class="three">three</td>
</tr>
<tr>
<td class="one">check</td>
<td class="two">checked</td>
<td class="three">checking</td>
</tr>
</table>
<form>
#input for first column
#input for second column
#input for third column
</form>
<div class="add">Add New Row</div> //on clicking add new row form gets open and there is save button to add new row

我相信这对Kunal来说已经晚了3年8个月，但也许有人会受益。

@Palpatim是正确的，一点jquery就可以了。我在我的车把视图中包含了以下内容:

按钮:

<button id="btnNewRow">Add New Row</button>

脚本向表中添加一行:

<script>
    $(document).ready(function() {
        $('#btnNewRow').on('click', function(evt) {
            evt.preventDefault();
            $("#approverTable").find('tbody')
                .append($('<tr><td><input></td><td><input></td><td><input></td></tr>'))
        });
    });
</script>

最后请记住，您需要从本地副本或通过内容分发网络(CDN)加载jquery，因此添加以下内容(我在我的handlebars布局而不是我的视图中添加)。

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
相关文章：