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

UPDATE 修改鏈接

Answer 1

最後我解決我的問題：

$(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

Answer 2

的問題是，你追加輔助排至#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 - 你應該使用class，因爲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(); 

    }); 

注意：

我還沒有真正看過了你的其他代碼，但它好像你正在複製兩個不同的IDS #prueba和＃prueba2和克隆他們以相同的新ID - 'nuevo'。

也 - 我不是一個jquery大師或任何東西，我不知道如何：最後選擇器在不同的瀏覽器工作，但至少是一個開始。

但我的建議是，你照顧的id的唯一一點更仔細

Answer 3

你能做到這樣

$(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/