当需要动态添加数据时,需要动态的改变表格的行数,并且每行的类型应该相同,此时可以使用下面的代码来完成需求
function delRow(obj) {
if(window.confirm("你确定要删除该属性吗?")) {
var num = $("#configTable tr").size();
if(num <= 1) {
alert("请至少保留一行");
return;
}
var jTR = $(obj).parent().parent();
jTR.remove();
}
}
function addRow() {
var JTable = $("#configTable");
var JTr = $("#configTable tr").eq(0);
var JTrClone = JTr.clone(true);
var TD = JTrClone.find("td:eq(5)");
var SELECT = TD.find("select[name='enumValue']");
var INPUT = TD.find("input:eq(0)");
SELECT.empty().append($("<option>枚举值</option>"));
INPUT.val("text");
TD.hide();
var JInput = JTrClone.find("input:eq(0)");
var JSelect = JTrClone.find("select:eq(0)");
for(var i=0;i<JInput.length;i++) {
JInput.val("");
}
JSelect.get(0).options[0].selected = true;
JTrClone.appendTo(JTable);
}
<table id="configTable" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="right" style="width:100px;">属性名</td>
<td align="left" style="vertical-align:middle;padding-left:3px;height:30px;">
<ui:textfield name="propertyKey"/>
</td>
<td align="right" style="width:100px;">属性类型</td>
<td align="left" style="vertical-align:middle;padding-left:3px;height:30px;">
<select onchange="enumConfig(this);" name="selectValue">
<option value="text">文本类型</option>
<option value="date">日期类型</option>
<option value="enum">枚举类型</option>
</select>
</td>
<td align="center" style="padding-left:10px;">
<button type="button" class="stk-button stk-button-st-3" class="stk-button-icon ui-icon-circle-close"></span><span></span></button>
</td>
<td style="padding-left:10px; display:none;">
<input type="hidden" name="propertyType" value="text"/>
<input type="hidden" name="propertyValue" />
<select onkeydown="enumDown(event,this);" onkeypress="enumPress(event,this);" name="enumValue">
<option>枚举值</option>
</select>
</td>
</tr>
</table>
本文出自 “2332615” 博客,请务必保留此出处http://2342615.blog.51cto.com/2332615/600134