jQuery动态增减行的实例代码解析(推荐)

2020-05-27 18:02:55易采站长站整理

先给大家展示下效果图:

这是没有增加时的界面:

这里写图片描述 

增加后的界面:

这里写图片描述 

删除后的界面:

这里写图片描述

原因分析:

不擅长jquery和JavaScript

场景:

代码如下:


<table class="table table-bordered">
<thead>
<tr>
<th style="width: 10px">輪次</th>
<th style="width: 100%">比賽時間</th>
<th>比賽場地</th>
<th>主隊</th>
<th>主隊得分</th>
<th>客隊</th>
<th>客隊得分</th>
<th>比賽結果</th>
<th>删除</th>
</tr>
</thead>
<tbody id="Games_tbody">
<tr>
<td>
<input type="number" style="width: 40px"/>
</td>
<td>
<input type="date" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 40px"/>
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" id="delete" onclick="$(this).parent('td').parent('tr').remove()">删除</button>
</td>
</tr>
<tr>
<td>
<input type="number" style="width: 40px"/>
</td>
<td>
<input type="date" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 140px"/>
</td>
<td>
<input type="number" style="width: 80px"/>
</td>
<td>
<input type="text" style="width: 40px"/>
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" id="delete" onclick="$(this).parent('td').parent('tr').remove()">删除</button>