JQuery实现表格行当复制

当需要动态添加数据时，需要动态的改变表格的行数，并且每行的类型应该相同，此时可以使用下面的代码来完成需求

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