手记

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" >属性名</td>
                    <td align="left" >
                        <ui:textfield name="propertyKey"/>
                    </td>
                    <td align="right" >属性类型</td>
                    <td align="left" >
                        <select onchange="enumConfig(this);" name="selectValue">
                            <option value="text">文本类型</option>
                            <option value="date">日期类型</option>
                            <option value="enum">枚举类型</option>
                        </select>
                    </td>
                    <td align="center" >
                        <button type="button" class="stk-button stk-button-st-3"  class="stk-button-icon ui-icon-circle-close"></span><span></span></button>
                    </td>
                    <td >
                        <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>

0人推荐
随时随地看视频
慕课网APP