Tips for adjusting the placement of an object within a table

Question

Tips for adjusting the placement of an object within a table

Below is an example of a basic table:

table, th, td {
  border: 1px black solid;
  border-collapse: collapse;
}

<table>
  <tr>
    <th>number</th>
    <th>name</th>
    <th>id</th>
  </tr>
  <tr>
    <td>1</td>
    <td>red</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>blue</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>yellow</td>
    <td>3</td>
  </tr>
</table>

I am looking to implement a feature that allows drag and drop functionality in the table. When an item is moved from one position to another, I want its number to change to match the position it was moved to, while keeping the name and id unchanged. For instance, if "blue" is moved to the first spot, its number should become 1 while its id remains 2, and similarly for other items. The overall goal is to maintain consistency in the table while allowing for reordering through drag and drop.

Any suggestions on how I can achieve this?

javascript html css html-table

Answer 1

Answer №1

Utilize the drag event to create a copy of the target element when dragging is initiated, which will be necessary for handling drag-over events.

Once the drag operation concludes, rearrange the first td in each table row (tr) excluding any rows within the thead section by targeting the tbody.

let shadow
function dragit(event) {
    shadow = event.target;
}
function dragover(e) {
    let children = Array.from(e.target.parentNode.parentNode.children);
    if (children.indexOf(e.target.parentNode) > children.indexOf(shadow))
        e.target.parentNode.after(shadow);
    else
        e.target.parentNode.before(shadow);
}
function reOrder() {
    document.querySelectorAll(".myTable > tbody > tr > td:first-child").forEach(function (elem, index) {
        elem.innerHTML = (index + 1);
    });
}

table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
}

 <table class="myTable">
    <thead>
        <tr>
            <th>number</th>
            <th>name</th>
            <th>id</th>
        </tr>
    </thead>
    <tbody>
        <tr draggable="true"  ondragstart="dragit(event)"  ondragover="dragover(event)" ondragend="reOrder()">
            <td>1</td>
            <td>red</td>
            <td>1</td>
        </tr>
        <tr draggable="true"  ondragstart="dragit(event)"  ondragover="dragover(event)" ondragend="reOrder()">
            <td>2</td>
            <td>blue</td>
            <td>2</td>
        </tr>
        <tr draggable="true"  ondragstart="dragit(event)"  ondragover="dragover(event)" ondragend="reOrder()">
            <td>3</td>
            <td>yellow</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Answer 2

Utilize the drag event to create a copy of the target element when dragging is initiated, which will be necessary for handling drag-over events.

Once the drag operation concludes, rearrange the first td in each table row (tr) excluding any rows within the thead section by targeting the tbody.

let shadow
function dragit(event) {
    shadow = event.target;
}
function dragover(e) {
    let children = Array.from(e.target.parentNode.parentNode.children);
    if (children.indexOf(e.target.parentNode) > children.indexOf(shadow))
        e.target.parentNode.after(shadow);
    else
        e.target.parentNode.before(shadow);
}
function reOrder() {
    document.querySelectorAll(".myTable > tbody > tr > td:first-child").forEach(function (elem, index) {
        elem.innerHTML = (index + 1);
    });
}

table, th, td {
    border: 1px black solid;
    border-collapse: collapse;
}

 <table class="myTable">
    <thead>
        <tr>
            <th>number</th>
            <th>name</th>
            <th>id</th>
        </tr>
    </thead>
    <tbody>
        <tr draggable="true"  ondragstart="dragit(event)"  ondragover="dragover(event)" ondragend="reOrder()">
            <td>1</td>
            <td>red</td>
            <td>1</td>
        </tr>
        <tr draggable="true"  ondragstart="dragit(event)"  ondragover="dragover(event)" ondragend="reOrder()">
            <td>2</td>
            <td>blue</td>
            <td>2</td>
        </tr>
        <tr draggable="true"  ondragstart="dragit(event)"  ondragover="dragover(event)" ondragend="reOrder()">
            <td>3</td>
            <td>yellow</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Tips for adjusting the placement of an object within a table

Answer №1

Similar questions

Creating asynchronous JavaScript constructors using a static method called "create" presents challenges when dealing with TypeScript types

Verify if a <select> element exists inside the main div

Tips on how to showcase up to 200 characters from a string

Transmitting information via Ajax, jquery, Node.js, and Express

Pass data to three.js using an input form

Tips for incorporating a dynamic basePath into your NextJS project

Uploading information by merging form data with a fetch API reply

Personalized design created using v-for

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Learn how to incorporate an image into your Codepen project using Dropbox and Javascript, along with a step-by-step guide on having the picture's name announced when shown on the screen

Transforming conversion code snippet from jQuery to Dojo - utilizing AJAX techniques

Who is the intended audience for the "engines" field in an npm package - consumers or developers?

The JSON.parse function encountered an Uncaught SyntaxError due to an unexpected token 'o

Unable to retrieve real-time data from Firestore using getStaticPaths in Next.js

Experiencing difficulties with using the javascript alternative to jQuery.ajax()

What steps should I take to make sure the vuex store is included in my build process?

Content in the <core-animation-pages> element is extending beyond the borders of the main DIV when the "slide-from-right" effect is applied (Polymer

Is there a way for me to perfectly align the image and the h1 header on the webpage?

Can you suggest a method using Lodash to remove specific rows from an array based on the value of a certain field within the array?

What is the correct way to test setInterval() statements within Angular?