javascript - 如何使用 jQuery / JavaScript 复制和插入表格行

Question

我有一个具有以下结构的表

<table id='table1'>
    <tbody>
        <tr id='rowa'>
          <td><select>....</select></td>
        <tr>
        ...
        <tr id='rowx'>
          <td>....</td>
        </tr>
        ...
        <tr id='rowz'>
        </tr>
    </tbody>
</table>

我想要做的是点击一个按钮，我想复制rowa并将它插入到rowx之前。

我目前正在做的是

<script type='text/javascript'>
    function copyRow() {
        var row = $('#rowa').clone();
        $('#rowx').before(row);
    }
</script>

它似乎在 rowx 之前显示了新构建的行，但是当我尝试访问该新行时，它不起作用。我的意思是不起作用，因为选择输入项的行为不像选择项，它的行为像静态文本。

我在页面上的其他地方

<a href='javascript:copyRow()'><img src='images/copyrow.png' title='Copy Row' /></a>

对不起！我应该明确表示，当用户单击页面上其他位置的链接时，正在调用 copyRow。

Answer 1

检查这个http://jsbin.com/ovivin/1/。

JS：

$(document).ready(function(){
  $("#rowx").before($("#rowa").clone());
});

您的代码不起作用，因为您从不调用copyRow(). 我把它放进去，document.ready()这样它就可以在文档准备好时运行！