// js 代码示例
function addNew()
{
var count = $('#mainTable').find('input[alt=svc_grp]').length;
var cloneRow = $('#cloneRow').clone();
cloneRow.find('input[alt=svc_grp]').attr('name', 'serviceGroupBean['+count+'].svc_grp');
cloneRow.find('input[alt=svc_grp_name]').attr('name', 'serviceGroupBean['+count+'].svc_grp_name');
cloneRow.find('select[title=origin_code]').attr('name', 'serviceGroupBean['+count+'].origin_code');
cloneRow.find('input[alt=product_code]').attr('name', 'serviceGroupBean['+count+'].product_code');
cloneRow.find('input[alt=remark]').attr('name', 'serviceGroupBean['+count+'].remark');
cloneRow.removeAttr('id');
$('#mainTable').append(cloneRow);
}
<table id="cloneTable" style="display: none;">
<tr id="cloneRow">
<td/>
<td>
<input type="hidden" alt="svc_grp">
</td>
<td>
<input type="text" class="InputTextbox" alt="svc_grp_name" maxlength="20">
</td>
<td>
<select title="origin_code" class="InputTextbox" >
<option value=""><bean:message key="screen.m_svgs01.info.selectone"/></option>
<logic:iterate id="originCode" name="LIST_ORIGIN_CODE">
<option value="${originCode.id }">
<bean:write name="originCode" property="name"/>
</option>
</logic:iterate>
</select>
</td>
<td>
<input type="text" class="InputTextbox" alt="product_code" maxlength="20"/>
</td>
<td>
<input type="text" class="InputTextbox" alt="remark" maxlength="20"/>
</td>
</tr>
</table>
用Jquery实现简直太方便了。
首先通过属性选择器算出当前行数的最大值,由于索引是从0开始的,所以直接将length做为新增行的索引
然后将隐藏的行克隆一下,然后编辑其name属性以向后台传值。最后将克隆编辑好的直接放在目的地的最后面。
Note:向后传值的话,就可以用对象list传,也可以用数组传,实例的中代码肯定是用对象传的
至于怎么删除新添加的一行,用jquery的remove方法和empty方法
对于索引值的维护,在每一列显示的序号,可以在显示的时候自动生成,也就是不用刻意的在删除的时候维护索引值,只要在后台判断为空的时候不插入就可以了,或者判断隐藏的id是不是存在来进行操作。
这样就可以将当行直接remove掉,不用担心索引什么的,
如果需要维护怎么办呢,探索中。
理论:
1.前台的索引不用管他,直接在后台控制索引。挨个加。
2.在前台用jquery获取所有的对象然后用each方法遍历,其参数function 可以获取对象的索引(从零开始)。将每个对象的隐藏索引值分别等于function的参数加一。