Скачать или смотреть How to Swap Two Rows in a Table Using JavaScript

Learn how to effectively swap rows in an HTML table based on user input using JavaScript, with clear solutions to common challenges.
---
This video is based on the question https://stackoverflow.com/q/67292718/ asked by the user 'Rinzler21' ( https://stackoverflow.com/u/12506687/ ) and on the answer https://stackoverflow.com/a/67293067/ provided by the user 'Mister Jojo' ( https://stackoverflow.com/u/10669010/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to swap two rows depending on the direction using JavaScript?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Swap Two Rows in a Table Using JavaScript

When developing web applications that involve displaying data in tables, you may encounter various user interaction requirements. One common feature is to allow users to dynamically rearrange rows within a table by clicking arrows. This guide will walk you through how to implement a row swapping functionality using JavaScript.

The Problem At Hand

Let’s consider a scenario wherein you have a table that lists abstracts or any other records. Each row has two arrows: one pointing up and another pointing down. The requirement is simple:

Clicking the up arrow on a row should swap it with the row above it.

Clicking the down arrow should swap it with the row below it.

However, if the first row's up arrow is clicked, it should not perform any action, and likewise, the last row's down arrow should not swap the row downward.

The Current State of Your Code

You might have already set up a JavaScript function to handle row movement, specifically by utilizing insertBefore(). Here’s a simplified version of what your initial logic may look like:

[[See Video to Reveal this Text or Code Snippet]]

This code works as long as you’re swapping rows that are not at the top or bottom of the table.

Enhancing the Row Swap Functionality

To make your row swapping functionality complete, you’ll need to check for the existence of previousElementSibling and nextElementSibling before performing any swap operations. Here’s how we can modify your function to include these checks:

Updated JavaScript Code

[[See Video to Reveal this Text or Code Snippet]]

Key Points Explained

Event Delegation: The onclick event is set on the entire table, allowing us to check which element was clicked.

Target Matching: We only process clicks that match our defined icons (up, down, or delete). This prevents unnecessary function calls.

Element Existence Check: Before attempting to swap rows, we check if the previous or next row exists using !!rowPrev and !!rowNext. This avoids trying to move a row when it cannot be moved (e.g., the first or last row).

Delete Option: A confirmation dialog is included for the delete action to prevent accidental deletions.

CSS Enhancements

To improve the user experience, you may want to disable the up arrow for the first row and the down arrow for the last row. Here's how to do that with CSS:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Implementing a row swapping feature in a table allows users to interactively manage data presentation. By thoroughly checking for row existence and applying event delegation, you can create a seamless user experience. Don't forget to enhance your styling to indicate which rows can be swapped!

Happy coding!