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/owivin/1/ .

JS:

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

您的代码无法正常工作，因为您从未调用copyRow()。我将其放入 document.ready() 中，以便在文档准备就绪时运行!