Javascript或Jquery添加，删除，复制行到表

Javascript or Jquery add, remove, copy rows to table

本文关键字：复制 删除 Jquery 添加 Javascript      更新时间：2023-09-26

我想知道如何或在哪里找到这种代码。让我先展示给你看

----- demonstration start -----添加新行

第1行-文本框|文本框|复选框|单选框| btnCopy, btnDelete，btnAdd

第2行-文本框|文本框|复选框|单选框| btnCopy, btnDelete，btnAdd

第3行-文本框|文本框|复选框|单选框| btnCopy, btnDelete，btnAdd

----- demonstration end -----

我希望你明白这是什么。这些框表示html输入元素。Btn -表示我将要按下的按钮。

我想这样。

在我按下btnAdd @ Line 1之后，另一个新的"Line 1"将出现在第1行之后的文本框中，没有任何数据，而不是表的末尾，在本例中是第3行。在我按下btnDelete后，除了原来的第1行，该行将被删除。这意味着原来的1号线、2号线和3号线不能被移除，但任何其他附加的线都会被移除。在我按btnCopy @第1行后，插入第1行的任何数据将被复制到刚刚插入的新行。这些过程将与第1、2线相同。3 .

但是，如果我按"添加新行"@演示的顶部，另一个新行将被插入@表的末尾(在本例中是第3行)。

还有其他想法吗?我上面展示的演示将在我的项目中使用，所以如果它真的可以与数据库交互就更好了。比如在id中循环插入多个数据，诸如此类。

示例演示- http://jsfiddle.net/zUAQC/11/

可以在不同的实现中以不同的方式轻松使用。
也可能有插件可用于此。

注意-这只是一个示例演示，有限的数据只是为了让你开始。

如果你正在使用jQuery，你可以使用DataTables插件做你想做的。

查看:http://datatables.net/

我试图解决我自己的问题，我手动创建了这个。效果很好。参见代码

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function copy(name) {
    $(name).parent().parent().clone().insertAfter($(name).parent().parent());
    $(name).parent().parent().next('tr').find("select").val($(name).parent().parent().find("select").val());
    $(name).parent().parent().next('tr').find(".delete").attr("onclick", "remove(this)");
}
function add(name) {
    $(name).parent().parent().clone().insertAfter($(name).parent().parent());
    $(name).parent().parent().next('tr').find("input").val('');
    $(name).parent().parent().next('tr').find(".delete").attr("onclick", "remove(this)");
}
function remove(name) {
    $(name).parent().parent().remove();
}
</script>
</head>
<body>
<table>
    <tr>
        <td>
        <select>
            <option selected="selected">Select 1</option>
            <option>Select 2</option>
        </select>
        </td>
        <td><input type="text" class="classItemCode" /></td>
        <td>
            <a href="javascript:void(0)" class="add" onclick="add(this)">Add</a> | 
            <a href="javascript:void(0)" class="copy" onclick="copy(this)">Copy</a> | 
            <a href="javascript:void(0)" class="delete">Remove</a>
        </td>
    </tr>
    <tr>
        <td colspan="2">
        <textarea cols="30" rows="5"></textarea>
        </td>
    </tr>
</table>
</body>
</html>

它工作，正如我想要的。如果这段代码不工作，请告诉我。

我没有在删除链接上添加onclick属性，因为该链接是原始链接。它不应该被移除。因此，我在copy()和add()函数中动态添加了onclick属性用于删除链接。

(它在Firefox上运行得很好。ie8和ie9也可以。但是ie只在一种情况下工作，我必须在开始时添加onclick属性@ delete链接。我会试着解决这个问题

相关文章：