复制表行并更改输入并选择名称

时间:2016-06-29 16:01:03

标签: jquery

我有这张桌子:

<table class="table table-bordered" style="width: 50%;" id="tabella">
            <tbody><tr>
                <td><b>Sub Family name</b>
                    <input type="text" id="nome.0" name="nome.0" class="form-control" value="">
            </td>
            <td>
                <b>Family</b>
                <select id="famiglia.0" name="famiglia.0">
                    <option></option>
                    <option value="1">01_PATINATE</option>

<option value="2">02_BRISTOL</option>

                </select>
            </td>
            <td>
                <b>Original format</b>
                <select name="form_carta_orig.0" id="form_carta_orig.0">
                    <option></option>
                    <option value="1">15x20</option><option value="3">70x100</option><option value="4">30x50</option>                   </select>
            </td>
            <td>
                    <table class="table table-bordered"><tbody><tr><td style="background-color:#eee;"><b>GR</b></td><td style="text-align:center;background-color:#eee;"><b>70</b></td><td style="text-align:center;background-color:#eee;"><b>100</b></td><td style="text-align:center;background-color:#eee;"><b>120</b></td><td style="text-align:center;background-color:#eee;"><b>150</b></td><td style="text-align:center;background-color:#eee;"><b>200</b></td><td style="text-align:center;background-color:#eee;"><b>34</b></td><td style="text-align:center;background-color:#eee;"><b>16</b></td></tr><tr><td style="text-align:center;background-color:#eee;"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="70"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="100"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="120"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="150"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="200"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="34"></td><td style="text-align:center;background-color:#eee;"><input type="checkbox" name="val_0[]" value="16"></td></tr></tbody></table>  
            </td>
        </tr>
    </tbody></table>

我正试图在jquery中使用此函数复制行:

var i = 1;
$("#aggiungi").click(function() {
    $("#tabella tr:first").clone().find("input").each(function() {
        $(this).val('').attr('id', function(_, id) { return id + i });
        var $tr = $(this).closest('tr');
        var $clone = $(lastTr).clone();
        var allTrs = $tr.closest('table').find('tr');
        console.log(allTrs);
        var lastTr = allTrs[allTrs.length-1];
        //alert(lastTr);

这里是我遇到麻烦的地方......

            $clone.find('td').each(function(){
            var el = $(this).find(':first-child');
            alert(el);
            var id = el.attr('id') || null;
            alert(id);
            if(id) {
                var a = id.substr(id.length-1);
                var prefix = id.substr(0, (id.length-1));
                alert(prefix);
                el.attr('id', prefix+(a));
                el.attr('name', prefix+(+a+1));
            }
        });
        $clone.find('input:text').val('');
        $tr.closest('table').append($clone);
    }).end().appendTo("#tabella");
    i++;
});

我可以克隆行...但我无法正确更改输入名称... 我不知道为什么......

1 个答案:

答案 0 :(得分:0)

您尝试在声明之前调用变量。在var lastTr下移动var $ clone

var $clone = $(lastTr).clone();
var allTrs = $tr.closest('table').find('tr');
console.log(allTrs);
var lastTr = allTrs[allTrs.length-1];