HTML Table - 向上、向下和删除按钮

Question

我正在使用 HTML5、CSS3、Javascript 和 Bootstrap 进行项目。

我遇到问题的当前页面有一个 HTML Table，它需要四个主要功能：添加新行、上移行、下移行、删除行。

更具体地说，我需要它能够：

为用户提供将 IP 范围添加到 table 底部新行的选项。为新的 IP 范围提供一个顺序号，该顺序号遵循先前定义的顺序。（示例：如果列出了 10 个 IP 范围，则新 IP 范围的订单号应为 11）在每行中提供用户按钮以按顺序向上或向下移动 IP 范围。为用户提供删除 IP 范围的选项。

现在我可以将 IP 范围添加到 table 底部的新行中。我可以上下移动行。我也可以删除一行。目前我的代码要求我在移动之前 select 我计划移动的行，这是我想删除的功能。

我需要帮助： 1。在执行这些功能之前，如何删除 SELECT 行的需要？示例：如果用户按下第 2 行中的向上箭头，是否只需将 IP 范围从第 2 行移动到第 1 行？ 2. 如何根据行是否被删除自动重新排序？示例：如果 table 中存在一个 IP 范围，它应该以值 Order=1 开头。任何后续 IP 范围行 'n' 的值都应为 1+n。如果table中有3个IP Range，删除第二个IP Range，如何保证顺序不是(1, 3)而是(1, 2)?

注意：所提供示例中 table 中的信息是静态的，但我将从数据库中动态填充。我不会事先知道有多少个 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');">&ShortUpArrow;</button>
        <button onclick="upNdown('down');">&ShortDownArrow;</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');">&ShortUpArrow;</button>
        <button onclick="upNdown('down');">&ShortDownArrow;</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');">&ShortUpArrow;</button>
        <button onclick="upNdown('down');">&ShortDownArrow;</button>
        <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()">
      </td>
    </tr>

  </tbody>

</table>

<hr>

Link 到 JS Fiddle: What I've got so far

Answer 1

它可能看起来很奇怪，但它确实有效：

您可以将 clicked button 作为 parameter 发送给函数并导出它所属的 row。该行是您需要的元素。

const tbody = document.querySelector("#table tbody");
function upNdown(direction,button) {
// Here button parameter is getting the button which is clicked
// Its parent element is a td whose parent element is a tr which is to be moved and voila
  let selected = button.parentElement.parentElement;
   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;
    }
  }
}

<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',this);">&ShortUpArrow;</button>
        <button onclick="upNdown('down',this);">&ShortDownArrow;</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',this);">&ShortUpArrow;</button>
        <button onclick="upNdown('down',this);">&ShortDownArrow;</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',this);">&ShortUpArrow;</button>
        <button onclick="upNdown('down',this);">&ShortDownArrow;</button>
        <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()">
      </td>
    </tr>

  </tbody>

</table>

这是维护索引的方法：

添加一个 class ip-row 或任何你想要的到所有持有 ip 的 tr 元素。
记住只将 class 赋给持有 ip 的元素，否则它将索引所有行。
拿那个 class 并在 delete 函数中插入下面的代码，并在你像这样删除元素之后放置它-

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);
  // Select all trs
  let trs = Array.from(tbody.querySelectorAll('.ip-row'))
  // Start index
  let index = 1;
  trs.forEach((tr) => { 
    // For all trs give a value to its first td which holds the index
    tr.querySelectorAll('td')[0].innerHTML = index;
    // increment the index
    index++
  })
}

HTML Table - 向上、向下和删除按钮

HTML Table - Buttons for Up, Down and Delete

html

javascript

css

events

dom