【前端学习】小练习——表格的增删改查

最新推荐文章于 2024-05-10 15:47:34 发布

yypksqy

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量381

点赞数 9

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

本文链接：https://blog.csdn.net/JNB030605/article/details/135657316

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

请添加图片描述

学习笔记视频来源：3小时前端入门教程（HTML+CSS+JS）
https://www.bilibili.com/video/BV1BT4y1W7Aw?p=1&vd_source=01d8d8bf9ce02b30207c26b6979f8a36

源代码：
table_practice.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: 20px;
        }
        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>yypksqy</td>
            <td>12345678910</td>
            <td>
                <button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
    <script src="JS\table.js"></script>
</body>
</html>

table.js文件内容：

// 新增数据函数
function addRow(){
    var table = document.getElementById('table');
    // console.log(table);

    //获取插入的位置
    var length = table.rows.length;
    // console.log(length);

    // 插入行节点
    var newRow = table.insertRow(length);
    // console.log(newRow);

    // 插入列节点对象
    var nameCol = newRow.insertCell(0);
    var phoneCol = newRow.insertCell(1);
    var actionCol = newRow.insertCell(2);
    
    // 修改节点文本内容
    nameCol.innerHTML = '未命名';
    phoneCol.innerHTML = '无联系方式';
    actionCol.innerHTML = '<button οnclick="editRow(this)">编辑</button><button οnclick="deleteRow(this)">删除</button>';
}


// 删除数据函数
function deleteRow(button){
    // console.log(button);
    var row = button.parentNode.parentNode;
    console.log(row);
    row.parentNode.removeChild(row);
}


//编辑数据函数
function editRow(button){
    // console.log(button);
    var row = button.parentNode.parentNode;
    var name = row.cells[0];
    var phone = row.cells[1];

    var inputName = prompt("请输入名字:");
    var inputphone = prompt("请输入联系方式:");

    name.innerHTML = inputName;
    name.innerHTML = inputphone;
}