CODEWITHSUNDEEP
jqueryjquery-selectors
Jorge
Jorge

Reputation: 18257

append an object to the last row of a table

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");
})

Upvotes: 0

Views: 1416

Answers (3)

leandre_b
leandre_b

Reputation: 331

I think you were missing a few closing tags in your example, but basically, like the others have said.

This, however, is how I would have done it.

function initialize() {
    $('#butonID').click(function (){
        var $row = $('<tr><td></td></tr>');
        var $copy = $('#prueba').clone().attr('id','nuevo').removeAttr('class').appendTo($row.find('td'));
        $row.appendTo('#tblSalida');
    });
}

EDIT:

I just realised that I'm declaring a variable for nothing. :P cwolves has the ideal code.

Upvotes: 0

user578895
user578895

Reputation:

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
);

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69915

Try this

function initialize(){
 $("#butonID").click(function (){
     $("<tr />").append($("<td />").append($("#prueba").clone().attr('id','nuevo').attr('class',''))).appendTo($("#tblSalida"));
 });
}

Upvotes: 1

Related Questions