Question

i have two table like this

<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>
    <input name="primerboton" id="butonID" type="button" value="Copiar" />
</td>
</tr>
</table>

<table id="tblSalida">
<tr>
    <td>
        salida
    </td>
</tr>
</table>

when the user do a click a i need to copy the object in a new row of table the problem it’s that with the selector add a new column. how can i accomplish my goal

This is my js

$(document).ready(initialize);

function initialize(){
 $("#butonID").click(function (){
     $("#prueba").clone().attr('id','nuevo').attr('class','').appendTo("#tblSalida tr:last");
})

Answer 1

try:

$('#tblSalida').append(     // append new row to table
    $('<tr><td></td></tr>') // create the new row
        .find('td').append( // append select to the new td
            $('#prueba').clone().attr('id', 'nuevo').attr('class', '')
        )
        .end()              // return to the `tr` so it is appended, not the td
);