Demo
HTML part
<!DOCTYPE html>
<html>
<head>
<title>Table example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Update time</th>
<th>Operation</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Here are dummy data rows, you can add more as needed -->
<tr>
<td>2023-10-13 10:00 ---- PM</td>
<td>
<button onclick="moveUp(this)">Move Up</button>
<button onclick="moveDown(this)">Move down</button>
<button onclick="moveToTop(this)">Pick to top</button>
<button onclick="moveToBottom(this)">Move to bottom</button>
<button onclick="removeRow(this)">Delete</button>
</td>
</tr>
<tr>
<td>2023-10-13 02:30 ---- AM</td>
<td>
<button onclick="moveUp(this)">Move Up</button>
<button onclick="moveDown(this)">Move down</button>
<button onclick="moveToTop(this)">Pick to top</button>
<button onclick="moveToBottom(this)">Move to bottom</button>
<button onclick="removeRow(this)">Delete</button>
</td>
</tr>
</tbody>
</table>
<button onclick="addRow()">Add data row</button>
<script>
var dataList = [
{<!-- --> time: "2023-10-13 10:00 PM", operation: "Sample operation 1" },
{<!-- --> time: "2023-10-13 02:30 AM", operation: "Example operation 2" },
//Add more data rows
];
//Initialize form
function initializeTable() {<!-- -->
var tableBody = document.getElementById("tableBody");
tableBody.innerHTML = ""; // Clear table content
dataList.forEach(function (data) {<!-- -->
var newRow = document.createElement("tr");
newRow.innerHTML = `
<td>${<!-- -->data.time}</td>
<td>
<button onclick="moveUp(this)">Move Up</button>
<button onclick="moveDown(this)">Move down</button>
<button onclick="moveToTop(this)">Pick to top</button>
<button onclick="moveToBottom(this)">Move to bottom</button>
<button onclick="removeRow(this)">Delete</button>
</td>
`;
tableBody.appendChild(newRow);
});
// console.log(" ~ file: tabel.html:47 ~ dataList:", dataList)
}
// add row
function addRow() {<!-- -->
var newTime = getCurrentTime() + ' ---- ' + Math.round(Math.random() * 100 + 1);
dataList.push({<!-- --> time: newTime, operation: "new operation" });
initializeTable(); // Re-render the table
}
//remove row
function removeRow(button) {<!-- -->
// var row = button.closest("tr"); // Get the row containing the button // Find the ancestor element closest to the specified selector in the DOM tree
var row = button.parentNode.parentNode; // twice parentNode gets the <td> element and <tr> element of the button respectively
var rowIndex = row.rowIndex - 1; // Decrease 1 to account for header rows
console.log(" ~ file: tabel.html:83 ~ removeRow ~ row:", row)
if (rowIndex >0) {<!-- -->
dataList.splice(rowIndex, 1); // Remove the corresponding data from the data list
console.log(" ~ file: tabel.html:85 ~ removeRow ~ dataList:", dataList)
initializeTable(); // Re-render the table
}else{<!-- -->
alert('Okay, delete it and it will be gone')
}
}
function getCurrentTime() {<!-- -->
var now = new Date();
var year = now.getFullYear();
var month = (now.getMonth() + 1).toString().padStart(2, '0');
var day = now.getDate().toString().padStart(2, '0');
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var time = `${<!-- -->year}-${<!-- -->month}-${<!-- -->day} ${<!-- -->hours} :${<!-- -->minutes}`;
return time;
}
</script>
</body>
</html>
Move up
//Move up
function moveUp(button) {<!-- -->
var row = button.closest("tr"); // Find the row containing the button
var rowIndex = row.rowIndex - 1; // Table row index (decrease 1 to take into account header row)
if (rowIndex > 0) {<!-- --> // Make sure it is not the first row
//Exchange the data of the current row and the previous row
var temp = dataList[rowIndex];
dataList[rowIndex] = dataList[rowIndex - 1];
dataList[rowIndex - 1] = temp;
initializeTable(); // Re-render the table
}else{<!-- -->
alert('Don't click anymore, it's already the first line')
}
}
Move down
// move down
function moveDown(button) {<!-- -->
var row = button.closest("tr"); // Find the row containing the button
var rowIndex = row.rowIndex - 1; // Table row index (decrease 1 to take into account header row)
if (rowIndex < dataList.length - 1) {<!-- --> // Make sure it is not the last row
//Exchange the data of the current row and the next row
var temp = dataList[rowIndex];
dataList[rowIndex] = dataList[rowIndex + 1];
dataList[rowIndex + 1] = temp;
initializeTable(); // Re-render the table
}else{<!-- -->
alert('Don't click anymore, it's the last line')
}
}
Pick it
//Top
function moveToTop(button) {<!-- -->
var row = button.closest("tr"); // Find the row containing the button
var rowIndex = row.rowIndex - 1; //Table row index (decrease 1 to account for header row)
if (rowIndex > 0) {<!-- --> // Make sure it is not the first row
//Move the current row data to the beginning of the array
var movedRowData = dataList.splice(rowIndex, 1)[0];
console.log(" ~ file: tabel.html:135 ~ moveToTop ~ movedRowData:", movedRowData)
dataList.unshift(movedRowData);
initializeTable(); // Re-render the table
}else{<!-- -->
alert('Okay, it's already the first one')
}
}
Put it to the bottom
//Set at the end
function moveToBottom(button) {<!-- -->
var row = button.closest("tr"); // Find the row containing the button
var rowIndex = row.rowIndex - 1; //Table row index (decrease 1 to account for header row)
if (rowIndex < dataList.length - 1) {<!-- --> // Make sure it is not the last row
//Move the current row data to the end of the array
var movedRowData = dataList.splice(rowIndex, 1)[0];
dataList.push(movedRowData);
initializeTable(); // Re-render the table
}
}
