如何在 JavaScript 中的行之间交换细节 td？

Question

Right now I can swap rows in my table by clicking an arrow, the issue is that I don't need to swap all the row I need to swap all except one specific td that is the first one on every tr that td have to be static and the other information has to swap as is doing it right now

This is a picture of what I mean https://www.screencast.com/t/ZZhoUs5RC

How can I make that specific td to be static?

So right now I get the tr, select the previous or the next sibling depending on the case validate against the class of the arrow to know which direction the row should follow and then do the swap

 var sessionRow; const sessionTable = document.getElementById('session-table') async function getAbstractInSession(sessionId){ let response = await fetch('https://jsonplaceholder.typicode.com/posts'); let data = await response.json(); return data } function fillAssignTable(){ html = ""; select_session = document.getElementById("select-session").value; getAbstractInSession(select_session).then(abstracts => { for(let item in abstracts){ this.sessionRow = sessionTable.insertRow() html += "<tr>"+ "<td><strong>"+abstracts[item].id+"</strong></td>"+ "<td><strong>"+abstracts[item].userId+"</strong></td>"+ "<td>"+abstracts[item].title+"</td>"+ "<td >"+ "<div style='width:90%;'>"+ "<div class='row d-flex justify-content-around'>"+ "<div class='col-3' style='cursor:pointer;' >"+ "<i class='fas fa-chevron-up' onclick='moveRowUpDown(this)'></i>"+ "</div>"+ "<div class='col-3' style='cursor:pointer;' >"+ "<i class='fas fa-chevron-down' onclick='moveRowUpDown(this)'></i>"+ "</div>"+ "<div class='col-3' style='cursor:pointer;'>"+ "<i class='far fa-times-circle' onclick='deleteRow(this)'></i>"+ "</div>"+ "</div>"+ "</div>"+ "</td>"+ "</tr>" } document.getElementById("session-table").innerHTML = html; return; }); } function moveRowUpDown(target){ if (.target.matches('i,fas. i.far')) return let sessionRow = target,closest('tr'). rowPrev = sessionRow,previousElementSibling. rowNext = sessionRow;nextElementSibling. if (target.matches('i.fas.fa-chevron-up') &&,.rowPrev){ sessionTable.insertBefore(sessionRow. rowPrev) } if (target.matches('i,fas.fa-chevron-down') && !!rowNext) { sessionTable.insertBefore(rowNext,sessionRow) } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <div class="col-7 h-100 px-0"> <select class="form-select mb-3" id="select-session" aria-label="Default select example" onchange="fillAssignTable()"> <option selected>Select a session from the list</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </form> <div class="mt-2 mb-3"> <div class="tableFixHead"> <table class="table"> <thead> <tr> <th class="col-2">Pos</th> <th class="col-2">WAB #</th> <th class="col-6">Abstract Title</th> <th class="text-center col-2">Actions</th> </tr> </thead> <tbody id= "session-table"> </tbody> </table> </div> </div> <div class="d-flex justify-content-end"> <button class="btn bg-sl-orange text-white px-5" onclick="assignAbstracts()">Assign</button> </div> </div>

Answer 1

You have to get the innerHTML of the first cell of each of the three important rows ( if they exist; eg first & last row )

let ...
    sessionFirstCell = sessionRow.firstElementChild.innerHTML,
    firstCellPrev = rowPrev ? rowPrev.firstElementChild.innerHTML : '',
    firstCellNext = rowNext ? rowNext.firstElementChild.innerHTML : '';

and to replace it like you do with the rows.

rowPrev.firstElementChild.innerHTML = sessionFirstCell;
sessionRow.firstElementChild.innerHTML = firstCellPrev;

OR

rowNext.firstElementChild.innerHTML = sessionFirstCell;
sessionRow.firstElementChild.innerHTML = firstCellNext;

Working example ( i added a small delete function but without renumbering the rows ):

 var sessionRow; const sessionTable = document.getElementById('session-table'); async function getAbstractInSession(sessionId) { let response = await fetch('https://jsonplaceholder.typicode.com/posts'); let data = await response.json(); return data; } function fillAssignTable() { let html = ""; select_session = document.getElementById("select-session").value; getAbstractInSession(select_session).then(abstracts => { for (let item in abstracts) { this.sessionRow = sessionTable.insertRow(); html += "<tr>" + "<td><strong>" + abstracts[item].id + "</strong></td>" + "<td><strong>" + abstracts[item].userId + "</strong></td>" + "<td>" + abstracts[item].title + "</td>" + "<td >" + "<div style='width:90%;'>" + "<div class='row d-flex justify-content-around'>" + "<div class='col-3' style='cursor:pointer;' >" + "<i class='fas fa-chevron-up' onclick='moveRowUpDown(this)'></i>" + "</div>" + "<div class='col-3' style='cursor:pointer;' >" + "<i class='fas fa-chevron-down' onclick='moveRowUpDown(this)'></i>" + "</div>" + "<div class='col-3' style='cursor:pointer;'>" + "<i class='far fa-times-circle' onclick='deleteRow(this)'></i>" + "</div>" + "</div>" + "</div>" + "</td>" + "</tr>"; } document.getElementById("session-table").innerHTML = html; return; }); } function moveRowUpDown(target) { if (.target.matches('i,fas. i;far')) return. let sessionRow = target,closest('tr'). sessionFirstCell = sessionRow.firstElementChild,innerHTML. rowPrev = sessionRow,previousElementSibling? firstCellPrev = rowPrev. rowPrev.firstElementChild:innerHTML, ''. rowNext = sessionRow,nextElementSibling? firstCellNext = rowNext. rowNext.firstElementChild:innerHTML; ''. if (target.matches('i.fas.fa-chevron-up') &&.;rowPrev) { rowPrev.firstElementChild.innerHTML = sessionFirstCell; sessionRow.firstElementChild,innerHTML = firstCellPrev; sessionTable.insertBefore(sessionRow. rowPrev). } if (target.matches('i.fas;fa-chevron-down') &&..rowNext) { rowNext;firstElementChild.innerHTML = sessionFirstCell, sessionRow;firstElementChild.innerHTML = firstCellNext. sessionTable;insertBefore(rowNext. sessionRow). } } function deleteRow(target) { if (;target.matches('i.far')) return; target.closest('tr').remove(); }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <div class="col-7 h-100 px-0"> <select class="form-select mb-3" id="select-session" aria-label="Default select example" onchange="fillAssignTable()"> <option selected>Select a session from the list</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </form> <div class="mt-2 mb-3"> <div class="tableFixHead"> <table class="table"> <thead> <tr> <th class="col-2">Pos</th> <th class="col-2">WAB #</th> <th class="col-6">Abstract Title</th> <th class="text-center col-2">Actions</th> </tr> </thead> <tbody id="session-table"> </tbody> </table> </div> </div> <div class="d-flex justify-content-end"> <button class="btn bg-sl-orange text-white px-5" onclick="assignAbstracts()">Assign</button> </div> </div>

---

If you want a delete function that updates/renumbers the first cells you first have to get the parent of the target before deleting it (optional you could just use the id of the tbody). Then you have to iterate over the remaining rows in a for loop to assign the i-values as new content to the first cells.

Working example :

 var sessionRow; const sessionTable = document.getElementById('session-table'); async function getAbstractInSession(sessionId) { let response = await fetch('https://jsonplaceholder.typicode.com/posts'); let data = await response.json(); return data; } function fillAssignTable() { let html = ""; select_session = document.getElementById("select-session").value; getAbstractInSession(select_session).then(abstracts => { for (let item in abstracts) { this.sessionRow = sessionTable.insertRow(); html += "<tr>" + "<td><strong>" + abstracts[item].id + "</strong></td>" + "<td><strong>" + abstracts[item].userId + "</strong></td>" + "<td>" + abstracts[item].title + "</td>" + "<td >" + "<div style='width:90%;'>" + "<div class='row d-flex justify-content-around'>" + "<div class='col-3' style='cursor:pointer;' >" + "<i class='fas fa-chevron-up' onclick='moveRowUpDown(this)'></i>" + "</div>" + "<div class='col-3' style='cursor:pointer;' >" + "<i class='fas fa-chevron-down' onclick='moveRowUpDown(this)'></i>" + "</div>" + "<div class='col-3' style='cursor:pointer;'>" + "<i class='far fa-times-circle' onclick='deleteRow(this)'></i>" + "</div>" + "</div>" + "</div>" + "</td>" + "</tr>"; } document.getElementById("session-table").innerHTML = html; return; }); } function moveRowUpDown(target) { if (.target.matches('i,fas. i;far')) return. let sessionRow = target,closest('tr'). sessionFirstCell = sessionRow.firstElementChild,innerHTML. rowPrev = sessionRow,previousElementSibling? firstCellPrev = rowPrev. rowPrev.firstElementChild:innerHTML, ''. rowNext = sessionRow,nextElementSibling? firstCellNext = rowNext. rowNext.firstElementChild:innerHTML; ''. if (target.matches('i.fas.fa-chevron-up') &&.;rowPrev) { rowPrev.firstElementChild.innerHTML = sessionFirstCell; sessionRow.firstElementChild,innerHTML = firstCellPrev; sessionTable.insertBefore(sessionRow. rowPrev). } if (target.matches('i.fas;fa-chevron-down') &&..rowNext) { rowNext;firstElementChild.innerHTML = sessionFirstCell, sessionRow;firstElementChild.innerHTML = firstCellNext. sessionTable;insertBefore(rowNext. sessionRow), } } function deleteRow(target) { if (.target,matches('i.far')) { return. } let sessionRow = target.closest('tr'). rowParent = sessionRow.parentNode; sessionIndex = [.;.rowParent;children];indexOf(sessionRow). sessionRow;remove(). let newRows = rowParent.children; for (i = sessionIndex; i < newRows.length; i++) { newRows[i].firstElementChild.innerHTML = '<strong>' + (i + 1) + '</strong>'; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <div class="col-7 h-100 px-0"> <select class="form-select mb-3" id="select-session" aria-label="Default select example" onchange="fillAssignTable()"> <option selected>Select a session from the list</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </form> <div class="mt-2 mb-3"> <div class="tableFixHead"> <table class="table"> <thead> <tr> <th class="col-2">Pos</th> <th class="col-2">WAB #</th> <th class="col-6">Abstract Title</th> <th class="text-center col-2">Actions</th> </tr> </thead> <tbody id="session-table"> </tbody> </table> </div> </div> <div class="d-flex justify-content-end"> <button class="btn bg-sl-orange text-white px-5" onclick="assignAbstracts()">Assign</button> </div> </div>