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

How to Copy and Insert Table Row using jQuery / JavaScript

本文关键字：插入 复制 JavaScript 何使用 jQuery      更新时间：2023-09-26

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

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

检查此项http://jsbin.com/owivin/1/.

JS:

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

您的代码无法工作，因为您从未调用copyRow()。我把它放在document.ready()中，这样它就可以在文档准备好时运行！

相关文章：