master

分支 (1)

管理

管理

master

web
/
上下移动删除项.html

<!DOCTYPE html>
<html>
<head>
  <title>上下移动和删除选项</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .language-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 2px solid black;
      padding: 10px;
      background-color: white;
    }

    .language {
      color: black;
    }

    .action-buttons {
      display: flex;
      gap: 5px;
    }

    .action-button {
      padding: 5px 10px;
      background-color: #ccc;
      border: 1px solid black;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="language-row">
      <span class="language">Java</span>
      <div class="action-buttons">
        <button class="action-button" onclick="moveUp(this)">上移</button>
        <button class="action-button" onclick="moveDown(this)">下移</button>
        <button class="action-button" onclick="deleteRow(this)">删除</button>
      </div>
    </div>
    <div class="language-row">
      <span class="language">Python</span>
      <div class="action-buttons">
        <button class="action-button" onclick="moveUp(this)">上移</button>
        <button class="action-button" onclick="moveDown(this)">下移</button>
        <button class="action-button" onclick="deleteRow(this)">删除</button>
      </div>
    </div>
    <div class="language-row">
      <span class="language">C</span>
      <div class="action-buttons">
        <button class="action-button" onclick="moveUp(this)">上移</button>
        <button class="action-button" onclick="moveDown(this)">下移</button>
        <button class="action-button" onclick="deleteRow(this)">删除</button>
      </div>
    </div>
  </div>

  <script>
    // 上移操作
    function moveUp(button) {
      const row = button.parentNode.parentNode;
      const previousRow = row.previousElementSibling;
      if (previousRow) {
        row.parentNode.insertBefore(row, previousRow);
      }
    }

    // 下移操作
    function moveDown(button) {
      const row = button.parentNode.parentNode;
      const nextRow = row.nextElementSibling;
      if (nextRow) {
        row.parentNode.insertBefore(nextRow, row);
      }
    }

    // 删除操作
    function deleteRow(button) {
      const row = button.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
  </script>
</body>
</html>