Web表格的增删改查demo

最新推荐文章于 2024-10-10 16:09:45 发布

某韬

最新推荐文章于 2024-10-10 16:09:45 发布

阅读量220

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_63205720/article/details/140207272

版权

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      border: 1px solid #ddd;
      text-align: center;
      padding: 8px;
    }

    th {
      background-color: #ddd;
    }

    button {
      margin-left: 5px;
    }
  </style>
  <script src="scripts/main.js"></script>
</head>
<body>
  <h1 style="text-align: center;">表格的增删改查</h1>
  <button onclick="addRow()">新增数据</button>
  <table id="table">
    <tr>
      <th>姓名</th>
      <th>联系方式</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>zhangsan</td>
      <td>123</td>
      <td>
        <button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
      </td>
    </tr>
  </table>
</body>
</html>

main.js

// 新增数据函数
function addRow() {
    var table = document.getElementById("table");
    var length = table.rows.length;

    // 插入行结点对象
    var newRow = table.insertRow(length);

    // 插入列结点对象
    var nameCol = newRow.insertCell(0);
    var phoneCol = newRow.insertCell(1);
    var actionCol = newRow.insertCell(2);

    nameCol.innerHTML = "未命名";
    phoneCol.innerHTML = "无";
    actionCol.innerHTML = "<button onclick=\"editRow(this)\">编辑</button><button onclick=\"deleteRow(this)\">删除</button>";
}

function deleteRow(button) {
    var row = button.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

function editRow(button) {
    var row = button.parentNode.parentNode;
    var name = row.cells[0];
    var phone = row.cells[1];
    var action = row.cells[2];

    var inputName = prompt("请输入姓名：");
    var inputPhone = prompt("请输入电话：");

    name.innerHTML = inputName;
    phone.innerHTML = inputPhone;
}

效果：带有增删改功能的表格