【发布时间】：2021-10-09 19:41:23
【问题描述】：
我正在开发一个使用 HTML5、CSS3、Javascript 和 Bootstrap 的项目。
我遇到问题的当前页面有一个 HTML 表格，它需要四个主要功能：添加新行、上移行、下移行、删除行。
更具体地说，我需要它能够：
为用户提供将 IP 范围添加到表格底部的新行的选项。 为新 IP 范围提供遵循先前定义顺序的订单号。 （示例：如果列出了 10 个 IP 范围，则新 IP 范围的订单号应为 11） 在每行中提供用户按钮以按顺序向上或向下移动 IP 范围。 为用户提供删除 IP 范围的选项。
现在我可以将 IP 范围添加到表格底部的新行中。我可以上下移动行。我也可以删除一行。 目前，我的代码要求我在移动之前选择我计划移动的行，这是我想删除的功能。
我需要什么帮助： 1。在执行这些功能之前，如何消除对 SELECT 行的需要？示例：如果用户在第 2 行按下向上箭头，只需将 IP 范围从第 2 行移动到第 1 行？ 2.如何根据行是否被删除自动重新排序？示例：如果表中存在 IP 范围，则应以值 Order=1 开头。任何后续 IP 范围行“n”的值应为 1+n。如果表中有3个IP Range，删除了第二个IP Range，如何保证顺序不是(1, 3)而是(1, 2)？
注意：提供的示例中表格中的信息是静态的，但我将从数据库中动态填充。我不会事先知道有多少个 IP 范围。
代码：
function SomeDeleteRowFunction() {
// event.target will be the input element.
var td = event.target.parentNode;
var tr = td.parentNode; // the row to be removed
tr.parentNode.removeChild(tr);
}
//This function adds a user-input IP Range to the end of table body
function addEndIPRanges() {
//Accessing table body
var table = document.getElementById("myTableBody");
//Insert row at end of table body (-1 appends)
var row = table.insertRow(-1);
//Insert 3 new cells into new row
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var rowCount = table.rows.length;
cell1.innerHTML = rowCount;
cell2.innerHTML = document.getElementById('addIPRange').value;
}
"use strict";
const tbody = document.querySelector("#table tbody");
let selected = null;
tbody.addEventListener("click", function(e) {
let row = e.target.closest("tr");
if (row === selected) {
row.classList.toggle("selected")
selected = null;
} else {
if (selected) {
selected.classList.toggle("selected");
}
selected = row;
row.classList.toggle("selected");
}
});
function upNdown(direction) {
let up, down;
if (selected) {
up = direction == "up" ? selected : selected.nextElementSibling;
down = direction == "up" ? selected.previousElementSibling : selected;
if (up && down) {
tbody.insertBefore(up, down); // put up before down
var temp = up.firstElementChild.textContent; // swap first cells' text content
up.firstElementChild.textContent = down.firstElementChild.textContent;
down.firstElementChild.textContent = temp;
}
}
}tr {
cursor: pointer
}
.selected {
background-color: red;
color: #fff;
font-weight: bold
}<figure class="text-center mb-3">
<h1 class="display-5">IP Range Management</h1>
</figure>
<hr>
<input type='text' id='addIPRange' />
<button style="text-align: center;" onclick="addEndIPRanges()">Add IP Range</button>
<hr>
<h4 class="iprangetableheader" style="text-align: center;">IP Ranges</h4>
<table id="table" style="margin: auto; width: 75%;">
<thead>
<tr style="text-align: center;">
<th scope="col">Order</th>
<th scope="col">IP Range</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>1</td>
<td>255.255.255.255</td>
<td><button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()">
</td>
</tr>
<tr>
<td>2</td>
<td>234.132.1.642</td>
<td><button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()">
</td>
</tr>
<tr>
<td>3</td>
<td>24.32.2.25</td>
<td><button onclick="upNdown('up');">↑</button>
<button onclick="upNdown('down');">↓</button>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()">
</td>
</tr>
</tbody>
</table>
<hr>链接到 JS Fiddle：What I've got so far
【问题讨论】：
标签： javascript html css dom events