将对象附加到表的最后一行

时间:2011-07-14 18:44:53

标签: jquery jquery-selectors

我有两张这样的表

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

当用户单击一个时,我需要在一个新的表行中复制该对象,问题就是选择器添加一个新列。我怎样才能实现目标

这是我的js

$(document).ready(initialize);

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

3 个答案:

答案 0 :(得分:2)

尝试:

$('#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
);

答案 1 :(得分:1)

试试这个

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

答案 2 :(得分:0)

我认为你的例子中缺少一些结束标记,但基本上就像其他人所说的一样。

然而,这就是我将如何做到的。

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

修改

我刚刚意识到我正在宣布一个变量。 :P cwolves拥有理想的代码。