基于前端HTML、css、JavaScript完成对于表格的增删改查

最新推荐文章于 2024-08-09 10:42:44 发布

侥幸而已啦

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量317

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/2301_80891017/article/details/139510607

版权

基于前端HTML、css、JavaScript完成对于表格的增删改查

<!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: 70%;
            margin: auto;
            border-collapse: collapse;/*将单元格合并用的*/
        }
        th, td {
            border: solid gray 1px;
            text-align: center;
            padding: 10px;
        }
        .centered {
            text-align: center;
        }
        .align-left {
            margin-left: auto;
            margin-right: auto;
            width: 70%;
            text-align: left;
        }
        .top{
            margin-bottom: 5px;
        }
        button{
            margin-left: 5px;
        }
        .color{
            background-color: gray;
        }
    </style>
</head>
<body>
    <h1 class="centered">表格的增删改查</h1>
    <div class="align-left">
        <button class="top" onclick="addrow()">新增人员</button>
    </div>
    <table id="table">
        <tr class="color">
            <td>姓名</td>
            <td>id</td>
            <td>操作</td>
        </tr>
      
    </table>
    <script src="D:\learnhtml\table.js"></script>
</body>
</html>

function addrow(){
   let table =  document.getElementById('table');
//    console.log(table);
   let row = table.rows.length;
//    console.log(row);
   let newrow = table.insertRow(row);
//    console.log(newrow);
   let namecol = newrow.insertCell(0);
   let idcol = newrow.insertCell(1);
   let operationcol = newrow.insertCell(2);
   let inputName = prompt("请输入您的姓名");
   let inputid = prompt("请输入您的id");
   namecol.innerHTML = inputName;
   idcol.innerHTML = inputid;
   operationcol.innerHTML = '<button οnclick="change(this)">编辑</button><button οnclick="removerow(this)">删除</button>';
}
function removerow(button){
    let row = button.parentNode.parentNode;
    // console.log(row);
    row.parentNode.removeChild(row);
}
// function change(button){
//     let name = button.cells[0];
//     let id = button.cells[1];
//     let inputName = prompt("请输入你的姓名:");
//     let inputid = prompt("请输入你的id:");
//     name.innerHTML = inputName;
//     id.innerHTML = inputid;
// }
function change(button) {
    // let nameCell = button.cells[0];
    // let idCell = button.cells[1];
    let row = button.parentNode.parentNode;
    let nameCell = row.cells[0];
    let idCell = row.cells[1];
    let inputName = prompt("请输入你的姓名:");
    let inputId = prompt("请输入你的ID:");
    
    nameCell.innerHTML = inputName;
    idCell.innerHTML = inputId;
}