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

发布于 2024-12-12 03:16:25 字数 766 浏览 0 评论 0原文

我想知道如何或在哪里可以找到此类代码。让我先给你展示一下

-----演示开始-----添加新行
第 1 行 - 文本框 |文本框 |复选框 |单选框 | btn复制、btn删除、 btn添加
第 2 行 - 文本框 |文本框 |复选框 |单选框 | btn复制、btn删除、 btn添加
第 3 行 - 文本框 |文本框 |复选框 |单选框 | btn复制、btn删除、 btn添加
-----演示结束-----

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

我想要这样的

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

但是，如果我在演示顶部按“添加新行”，则会在表格末尾插入另一行（在本例中为第 3 行）。

任何其他想法。上面我展示的演示是要在我的项目中使用的，所以如果它真的可以与数据库交互就更好了。就像循环遍历 ID 来插入多个数据一样。

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

最近可好 2024-12-19 03:16:25

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

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

注意 - 这只是一个示例演示，数据有限，仅供您入门。

回复收藏 0 原文

鲜肉鲜肉永远不皱 2024-12-19 03:16:25

如果您使用 jQuery，则可以使用 DataTables 插件来完成您想要的操作。

看看：http://datatables.net/

回复收藏 0 原文

许久 2024-12-19 03:16:25

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

<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 上工作得很好。IE 8 和 9 也工作。但是 IE 只在一种情况下工作，我必须在开始时添加 onclick 属性@删除链接。我会尝试解决这个问题。）

I tried to solve my own problem and I manually created this. It worked well.
See the code

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

It worked, as I wanted. If this code doesn't work, tell me.

I didn't add onclick attribute on delete link because that link is the original link. It shouldn't be removed. So I dynamically add onclick attribute for delete link in copy() and add() function.

(It worked perfect on Firefox. IE 8 and 9 worked too. But IEs worked only in one condition, I have to add onclick attribute @ delete link at the start. I will try to fix that.)

回复收藏 0 原文

~没有更多了~