为了账号安全,请及时绑定邮箱和手机立即绑定

JQuery实现表格行当复制

标签:
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>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消