今天我來給大家介紹一下jQuery插件Jput的演示效果。 Jput是一個基于jQuery的插件，主要功能是將表單數據與模板動態生成表格數據。這個插件非常方便實用，讓用戶不需要手動寫代碼，而是通過簡單的配置就可以隨意生成表格。下面我來演示一下它的使用效果。 首先我需要引入jQuery和Jput的相關js文件：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jput.js"></script>

接著我需要定義一個表單，用于輸入數據：

<form id="myForm">
<label for="name">姓名:</label>
<input type="text" name="name" />
<br />
<label for="age">年齡:</label>
<input type="text" name="age" />
<br />
<label for="gender">性別:</label>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<br />
<button id="submitBtn" type="submit">提交</button>
</form>

然后我需要定義模板，即表格的樣式：

<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
</tr>
</tbody>
</table>

最后我需要在JS文件中對Jput進行配置：

$(function () {
$("#submitBtn").click(function (event) {
event.preventDefault();
$("#myTable tbody").jput({
data: $("#myForm").serializeArray(),
tmpl: "#myTable >tbody >tr:first"
});
});
});

其中，data屬性指定表單數據，tmpl屬性指定表格的樣式。這里，我通過jQuery選擇器選中了table元素中的第一個tbody，由于這個tbody中只有一行，所以我指定了tmpl選擇器為tbody中的第一行。 好了，這就是Jput的使用，現在你可以自行嘗試一下，它一定會給你帶來很大的便利。