HTML+CSS+JS 使用常见的DOM制作网页表格

最新推荐文章于 2024-08-04 16:33:59 发布

木鳶戾天

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量134

点赞数 3

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_74000825/article/details/140342667

版权

一.效果展示

初始化：

添加新数据行：

修改已有行：

删除数据行：

二.代码

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格</title>
    <link rel="stylesheet" href="2.css" />
  </head>
  <body>
    <h1 style="text-align: center;">表格的增删改查</h1>
    <button id="1" onclick="addRow()">新增数据</button>
    <table id="table">
      <!-- 表格 -->
      <tr><!-- 定义表格的一行 -->
        <th>姓名</th><!-- 定义表头单元格 -->
        <th>联系方式</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>张三</td><!-- 定义数据单元格 -->
        <td>1111111111</td>
        <td>
          <button class="2" onclick="editorRow(this)">编辑</button>
          <button class="3" onclick="deleteRow(this)">删除</button>
        </td>
      </tr>
    </table>
    <script src="u.js"></script>
  </body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
table{
    width: 100%;
    border-collapse: collapse;/* 单元格边框合并 */
}
th,td{
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px;
    background-color: rgb(216, 247, 185);
}
th{
    background-color: rgb(77, 163, 1);
}
button{
    margin: 5px;
}

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

  var length = t.rows.length; /* 得到行数 */

  /* 插入数据行 */
  var newRow = t.insertRow(length); /* 没有参数直接插入最后 */

  /* 插入列节点 */
  var name = newRow.insertCell(0);
  var phone = newRow.insertCell(1);
  var act = newRow.insertCell(2);

  /* 动态生成对应部分的内容，按钮也一样 */
  name.innerHTML = "未命名";
  phone.innerHTML = "无联系方式";
  act.innerHTML =
    '<button class="2" onclick="editorRow(this)">编辑</button><button class="3" onclick="deleteRow(this)">删除</button>';
}

/* 删除行 */
function deleteRow(b) {
    let row = b.parentNode.parentNode;/* button->td->tr */
    row.parentNode.removeChild(row);/* 使用行的节点的父节点删除该行 */
}

/* 修改行 */
function editorRow(b){
    let td = b.parentNode.parentNode;
    var td1 = td.getElementsByTagName('td')[0];
    var td2 = td.getElementsByTagName('td')[1];
    console.log(td1);
    console.log(td2);
    
    var inputname = prompt("请输入姓名：");
    var inputph = prompt("请输入电话：");

    // 检查输入是否为空或用户点击了取消
    if (inputname !== null && inputname.trim() !== "" && inputph !== null && inputph.trim() !== "") {
        // 更新表格内容
        td1.innerHTML = inputname;
        td2.innerHTML = inputph;
    } else {
        // 如果输入为空或取消，则不进行任何更新
        alert("姓名和电话都不能为空。");
    }

}

>>来自B站学习视频

up主：罗大富Bigrich