Question

我有两个表，我希望当用户点击克隆时，两个下拉列表会添加到一行中（每列都在一列中）。我尝试了很多方法，但我可以帮助它。请帮助。

我的js：

function initialize(){

$("#butonID").click(function (){
     var aux =  '<tr><td id="col-1"></td><td id="col-2"></td><td id="col-3"></td><td="col-4"></td></tr>';
    $('#tblSalida').append(
        $(aux).find('#col-1').append($('#prueba').clone().attr('id', 'nuevo').attr('class', '')).end()
    );
    $('#tblSalida').append(
        $(aux).find('#col-2').append($('#prueba2').clone().attr('id', 'nuevo').attr('class', '')).end()
    );

})
}

Here's my code in action

更新修改了链接

Answer 1

问题是你要将aux行附加到#tblSalida表两次 - ergo两行。

稍微修改了你的代码。

http://jsfiddle.net/hipstr/pKn7Y/1/

似乎有效。

$("#butonID").click(function() {
    var aux = '<tr><td id="col-1"></td><td id="col-2"></td><td id="col-3"></td><td="col-4"></td></tr>';

    //append row 
    $('#tblSalida').append($(aux));


    // add clones to the row
    $('#col-1').append($('#prueba').clone().attr('id', 'nuevo').attr('class', '')).end();
    $('#col-2').append($('#prueba2').clone().attr('id', 'nuevo').attr('class', '')).end();
});

修改

是的 - 这只能运行一次。您没有在问题中指明您想要多次。

为了使它可以多次使用，你不能像你一样使用id - 你应该使用类，因为id是唯一的。

更新版本 http://jsfiddle.net/hipstr/pKn7Y/3/

$("#butonID").click(function (){ var aux = '<tr><td class="col-1"></td><td class="col-2"></td><td class="col-3"></td><td class="col-4"></td></tr>'; //append row $('#tblSalida').append($(aux)); // add clones to the last row $('#tblSalida tr:last').find('.col-1').append($('#prueba').clone().attr('id', 'nuevo').attr('class', '')).end(); $('#tblSalida tr:last').find('.col-2').append($('#prueba2').clone().attr('id', 'nuevo').attr('class', '')).end(); });

<强>注意：

我还没有真正查看过你的其他代码，但似乎你正在复制两个不同的ID #prueba和＃prueba2并将它们克隆到相同的新id - 'nuevo'。

也 - 我不是jquery大师或任何东西，我不知道如何：最后一个选择器在不同的浏览器中工作，但这至少是一个开始。

但我的建议是你要更仔细地处理id的独特性

Answer 2

你可以这样做

$(document).ready(initialize);

  function initialize(){

 $("#butonID").click(function (){

var aux =  '<tr><td id="col-1"></td><td id="col-2"></td><td id="col-3"></td><td="col-4"></td></tr>';

    $(aux)
    .find('#col-1').append($('#prueba')
    .clone().attr('id', 'nuevo').attr('class', '')).end()
    .find('#col-2').append($('#prueba2')
    .clone().attr('id', 'nuevo').attr('class', '')).end()
    .appendTo("#tblSalida");     
                })
            }

这是演示http://jsfiddle.net/dETuG/30/

Answer 3

最后我解决了我的问题：

$(document).ready(initialize);

function initialize() {

    $("#butonID").click(function() {
        $("#tblSalida").append('<tr></tr>');
        $("#tblSalida tr:last").append($('<td></td>').append($("#prueba").clone()));
        $("#tblSalida tr:last").append($('<td></td>').append($("#prueba2").clone()));
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <select name="prueba" id="prueba" class="ddlStyles">
                <option value="">Elige un estilo</option>
                <option value="messageTextStyle1">Estilo 1</option>
                <option value="messageTextStyle2">Estilo 2</option>
                <option value="messageTextStyle3">Estilo 3</option>
            </select>
        </td>
        <td>
            <select name="prueba" id="prueba2" class="ddlStyles">
                <option value="">Elige un estilo</option>
                <option value="messageTextStyle1">Estilo 1</option>
                <option value="messageTextStyle2">Estilo 2</option>
                <option value="messageTextStyle3">Estilo 3</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input name="primerboton" id="butonID" type="button" value="Copiar" />
        </td>
    </tr>
</table>

<table id="tblSalida">
    <tr>
        <td>
            salida
        </td>
    </tr>
</table>

jsfiddle here

克隆表的元素到其他

3 个答案: