Google trends Public Holidays Coupon Code Code Compiler

Dragging and dropping table rows in Javascript


Mar 17, 2019

Dragging and dropping table rows in Javascript

In this article I will show you how to implement drag and drop for HTML tables in Javascript. There are many articles/blogs on implementing drag and drop table row in Javascript and many excellent frameworks and libraries that provide you exactly you need.

how to re-order table rows in javascript. Table rows are different from other elements normally used for drag and drop such as list items or divs because they can’t be moved about in the same way. In this example we will use bootstrap for just make it better layout and use jquery ui for make sortable table row.

HTML Code:



<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop table rows in Javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <div class="container">
        <h3 class="text-center">Drag and Drop table rows using Javascript</h3>
        <table class="table table-bordered">
            <tr>
                <th>#</th>
                <th>Title</th>
                <th>Description</th>
            </tr>
            <tbody class="row_drag">
            
                <tr  id="1">
                    <td>1</td>
                    <td>title1</td>
                    <td>Desc1</td>
                </tr>
				<tr  id="2">
                    <td>2</td>
                    <td>title2</td>
                    <td>Desc2</td>
                </tr>
				<tr  id="3">
                    <td>3</td>
                    <td>title3</td>
                    <td>Desc3</td>
                </tr>
				<tr  id="4">
                    <td>4</td>
                    <td>title4</td>
                    <td>Desc4</td>
                </tr>
				
				<tr  id="5">
                    <td>5</td>
                    <td>title5</td>
                    <td>Desc5</td>
                </tr>
           
            </tbody>
        </table>
    </div> 
</body>
</html>



Javascript Code:


<script type="text/javascript">
    $( ".row_drag" ).sortable({
        delay: 100,
        stop: function() {
            var selectedRow = new Array();
            $('.row_drag>tr').each(function() {
                selectedRow.push($(this).attr("id"));
            });
           alert(selectedRow);
        }
    });
</script>

Copyright 2024. All rights are reserved