前端入门（五）之练习表格的增删改查

橙意满满的西瓜大侠

已于 2024-07-21 17:31:29 修改

阅读量394

点赞数 4

分类专栏：前端文章标签：前端

于 2024-07-21 17:12:59 首次发布

本文链接：https://blog.csdn.net/2302_79795489/article/details/140589862

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、html代码：

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的增删改查</title>

    <style>
        table{
            width:100%; /* 与浏览器同宽 */
            border-collapse: collapse; /*合并小单元格，使不留缝隙*/
            margin-top: 8px; /*与上面拉开间距*/
        }

        th,td{
            border:1px solid #ddd;
            text-align: center; /*居中显示*/
            padding: 8px; /*使空间大些*/
        }
        
        th{
            background-color: #ddd;
        }

        button{
            margin-left: 5px;
        }
    </style>
</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>小美</td><td>18616416349</td>
            <td>
                <button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
    
    <!-- 引入js文件 -->
    <script src="js\table.js"></script> 
</body>

</html>

二、js代码：

绑定->获取->增加 / 删除 / 修改

1、绑定事件

在button中添加属性： οnclick='addRow()'

2、获取节点

let table=document.getElementById('table')

let row=button.parentNode.parentNode

3、操作

（1）增加

获取插入行：let length=table.rows.length

let newRow=table.insertRow(length)

插入列单元：let nameCol=newRow.insertCell(0)

补充节点内容：nameCol.innerHTML='***'

（2）删除

由父节点删除：row.parentNode.removeChild(row)

注意：row.parentNode是tbody，而不是table

（3）修改

let name=row.cells[0] //这里name是节点，所以下面要用innerHTML，而不能直接用name

let inputName=prompt("请输入名字：")

if(inputName)

{name.innerHTML=inputName;}

两种弹窗：

alert（显示信息）：消息框，只显示信息

prompt（获取用户输入）：带有输入框的对话框，有返回值（点击取消或关闭，返回null）

//新增数据函数
function addRow(){
    //1、去html文档的对应的按钮那里绑定事件 onclick=addRow()

    //2、获取表格标签节点，用tagname得到的是一个数组，所以用id
    let table=document.getElementById('table');
    
    //3、插入行: 先获取插入的位置
    let length=table.rows.length;
    //console.log(length); 现有2行：第0行，第1行；插入的就是第2行

    //然后插入行节点
    let newRow=table.insertRow(length); //会返回当前插入的节点
    // console.log(newRow);
    // newRow.innerHTML='123'; innerHTML不是方法，而是属性

    //4、在新增的行中插入列节点对象
    let nameCol=newRow.insertCell(0); //插入新的小单元格，默认与表格的其他单元格对齐
    let phoneCol=newRow.insertCell(1);
    let actionCol=newRow.insertCell(2);
    
    //然后修改节点内容
    nameCol.innerHTML='未命名';
    phoneCol.innerHTML='无联系方式';
    actionCol.innerHTML='<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>'
    //单双引号要注意' "" '
}

//删除数据函数
function deleteRow(button){
     //1、去html文档的对应按钮那里绑定事件 onclick=deleteRow()
    //  console.log(button);->不可以写this，因为这里的函数属于删除button的外部了
    
    //2、获取当前行节点: 父节点的父节点
    let row=button.parentNode.parentNode;
    console.log(row);

    //3、删除行（不能自己删除自己，得由父节点来删）
    row.parentNode.removeChild(row);
}

//编辑数据函数
function editRow(button)
{
    //1、绑定事件
    //2、获取当前行节点
    let row=button.parentNode.parentNode;
    //3、修改内容
    let name=row.cells[0]; //cells不是函数，用中括号；用小括号的是函数
    let phone=row.cells[1];

    let inputName=prompt("请输入名字：");
    let inputPhone=prompt("请输入联系方式：");
    
    if(inputName) //判断输入不为空时，修改值
    {name.innerHTML=inputName;}
    if(inputPhone)
    {phone.innerHTML=inputPhone;}
}

橙意满满的西瓜大侠

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端入门（五）之练习表格的增删改查

cells[0] //这里name是节点，所以下面要用innerHTML，而不能直接用name。prompt（获取用户输入）：带有输入框的对话框，有返回值（点击取消或关闭，返回null）获取插入行：let length=table.rows.length。在button中添加属性： onclick='addRow()'注意：row.parentNode是tbody，而不是table。插入列单元：let nameCol=newTable.alert（显示信息）：消息框，只显示信息。由父节点删除：row。
复制链接

扫一扫

专栏目录