[JavaScript知识库] 表格行拖动复制粘贴即可用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 表格行拖动复制粘贴即可用 -> 正文阅读

[JavaScript知识库]表格行拖动复制粘贴即可用

TableDnD | jQuery plug-in to drag and drop rows in HTML tables
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>
</head>
<body>
<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>One</td><td>1 text</td></tr>
    <tr id="2"><td>2</td><td>Two</td><td>2 text</td></tr>
    <tr id="3"><td>3</td><td>Three</td><td>3 text</td></tr>
    <tr id="4"><td>4</td><td>Four</td><td>4 text</td></tr>
    <tr id="5"><td>5</td><td>Five</td><td>5 text</td></tr>
    <tr id="6"><td>6</td><td>Six</td><td>6 text</td></tr>
</table>

<div id="debugArea"></div>

<script type="text/javascript">
    $(document).ready(function() {
        // Initialise the table
        $("#table-1").tableDnD({
            onDragClass: "myDragClass",
            onDrop: function(table, row) {
                var rows = table.tBodies[0].rows;
                var debugStr = "Row dropped was "+row.id+". New order: ";
                for (var i=0; i<rows.length; i++) {
                    debugStr += rows[i].id+" ";
                }
                $("#debugArea").html(debugStr);
            },
            onDragStart: function(table, row) {
                $("#debugArea").html("Started dragging row "+row.id);
            }
        })
    });
     $("#table-1 tr:even").addClass('alt')
    $("#table-1").onDragStop=function (table,row) {
        console.log(table)
        console.log(row)

    }
</script>
</body>
</html>