當(dāng)需要動態(tài)添加數(shù)據(jù)時，需要動態(tài)的改變表格的行數(shù)，并且每行的類型應(yīng)該相同，此時可以使用下面的代碼來完成需求

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 οnchange="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 οnkeydοwn="enumDown(event,this);" οnkeypress="enumPress(event,this);" name="enumValue">
??????????????????????????? <option>枚舉值</option>
??????????????????????? </select>
??????????????????? </td>
??????????????? </tr>
??????????? </table>

轉(zhuǎn)載于:https://blog.51cto.com/2342615/600134

總結(jié)

以上是生活随笔為你收集整理的JQuery实现表格行当复制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。