I currently have a feature that allows me to swap rows in my table by clicking an arrow. The issue is that I only want to swap all the rows except for a specific td element, which is the first one in every tr. This particular td needs to remain static while the other information swaps as it currently does.
This screenshot illustrates what I mean:
How can I make sure that this specific td remains static?
At the moment, I am accessing the row, selecting the previous or next sibling depending on the scenario, validating against the arrow's class to determine the direction of the row movement, and then performing 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="066469697275727467764633283628362b6463726735">[email protected]</a>/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>