Question

我是jQuery的新手，我需要帮助复制Select和Input框，但不是第一个文本“Delete”。所以，让我解释一下。

我有下表，我们将重点关注第二行。

<table id="tableBucket" align="center" width="95%">
    <tr>
        <td align="center">
            <input type="button" id="btnAdd" name="btnAdd" value="Add">
        </td>
    </tr>

    <tr id="r1" style="display:block">
        <td>
            <a href="#" onClick="$(this).removeRow();">Delete</a>
            <select name="ddlBucket_1_1" id="ddlBucket_1_1">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>                
            </select>

            <select id="ddlOp_1_1" name="ddlOp_1_1">
                <option value=""></option>
                <option value="=">equal</option>
                <option value=">">greater</option>
                <option value=">=">greater or equal</option>
                <option value="<">less</option>
                <option value="=<">less or equal</option>
            </select>

            $<input type="text" id="BucketAmount_1_1" name="BucketAmount_1_1" size="12" />

            <select class="xor" id="ddlAndOR_1_1" name="ddlAndOR_1_1">
                <option value="And">And</option>
                <option value="Or">Or</option>
            </select>
        </td>
    </tr><br />
</table>

当选择了class =“xor”的SELECT下拉列表时，它将调用下面的函数将单元格内的元素复制到同一个单元格。

var myTbl = $('#tableBucket'), count = 1;
    myTbl.eq(0).on('change', 'td select.xor', function(){

        count += 1;
        var tds = [];
        var lastTr = $(this).closest("tr");
        //alert(lastTr);
        lastTr.find("td:eq(0)").each(function() {
            var idArr = ($(this).find('select, input').attr('id')).split('_');
            var newID = idArr[0] + '_' + idArr[1] + '_' + (count);
            alert("newID: " + newID);
            tds.push($(this).clone().find('select, input').attr('id', newID).prop('name', newID).end());
            alert(tds);
        })
        lastTr.append(tds);
    });

此函数在单元格中复制ALL，这意味着它还复制DELETE链接（标记），选择和文本。我喜欢做的只是从SELECT（ddlBucket_1_1）....复制到其余元素（ddlAndOR_1_1）。我还想在复制之后将标记<BR />       放在所有复制的元素之前，如下面的输出。

<table id="tableBucket" align="center" width="95%">
    <tr>
        <td align="center">
            <input type="button" id="btnAdd" name="btnAdd" value="Add">
        </td>
    </tr>

    <tr id="r1" style="display:block">
        <td>
            <a href="#" onClick="$(this).removeRow();">Delete</a>
            <select name="ddlBucket_1_1" id="ddlBucket_1_1">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>                
            </select>

            <select id="ddlOp_1_1" name="ddlOp_1_1">
                <option value=""></option>
                <option value="=">equal</option>
                <option value=">">greater</option>
                <option value=">=">greater or equal</option>
                <option value="<">less</option>
                <option value="=<">less or equal</option>
            </select>

            $<input type="text" id="BucketAmount_1_1" name="BucketAmount_1_1" size="12" />

            <select class="xor" id="ddlAndOR_1_1" name="ddlAndOR_1_1">
                <option value="And">And</option>
                <option value="Or">Or</option>
            </select>

            <BR />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;             
            <select name="ddlBucket_1_1" id="ddlBucket_1_1">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>                
            </select>

            <select id="ddlOp_1_1" name="ddlOp_1_1">
                <option value=""></option>
                <option value="=">equal</option>
                <option value=">">greater</option>
                <option value=">=">greater or equal</option>
                <option value="<">less</option>
                <option value="=<">less or equal</option>
            </select>

            $<input type="text" id="BucketAmount_1_1" name="BucketAmount_1_1" size="12" />

            <select class="xor" id="ddlAndOR_1_1" name="ddlAndOR_1_1">
                <option value="And">And</option>
                <option value="Or">Or</option>
            </select>


        </td>
    </tr>
</table>

Answer 1

有10种方法可以做到这一点，但最简单的方法可能是将<a>中的所有内容放在<fieldset class="whatever">中并使用jquery的.clone() method克隆

var $formfields = $('fieldset.whatever').eq(0).clone();
$('#r1').append($formfields);

你也可以跳过所有<BR />        hackery，因为fieldsets是块级元素。

编辑：这是一个小提琴：http://jsfiddle.net/gXM75/

在单元格TD中复制元素（选择和输入）

1 个答案: