JS实现表格的动态增删改功能

最新推荐文章于 2024-05-16 16:52:30 发布

Jiang酱~

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量5.9k

点赞数 4

分类专栏：作业

本文链接：https://blog.csdn.net/weixin_40758850/article/details/89206563

版权

功能：

全选，全不选
删除对应行
修改数量（点修改按钮之前不可更改，点击后此按钮value变确定，数量可改，再点击value变为修改，数量不可改）
增加行（直接在新增的行内输入数据，点击确定按钮后，不可更改）

效果图：

在这里插入图片描述

代码：

增加行的代码我有一部分屏蔽了，那部分是另外一种方法，不过是写死的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改订单</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <style>
        .container {
            width: 580px;
            margin-top: 10px;
        }

        input[type=text] {
            border: none !important;
            outline: none !important;
            text-align: center;
            /*height: 30px;*/
        }

        input[type=text]:focus {
            border: 1px solid #bbb !important;
            border-radius: 3px;
            text-align: left;
        }

        input[readonly]:focus {
            border: none !important;
            text-align: center;
        }
        select{
            border: none;
            outline: none;
        }
        select:focus{
            border: 1px solid #bbb !important;
            border-radius: 3px;
        }

    </style>
</head>
<body>
<h3 class="text-center">前端参考书</h3>
<table id="table" class="container table table-bordered text-center">
    <tr id="row0">
        <td>
            <input id="all" type="checkbox"> 全选
        </td>
        <td>书名</td>
        <td>价格（元）</td>
        <td>数量</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>
            <input name="ic" type="checkbox">
        </td>
        <td>JavaScript入门与提高</td>
        <td>59.00</td>
        <td><input name="text" type="text

最低0.47元/天解锁文章

Jiang酱~

关注

4
点赞
踩
49

收藏

觉得还不错? 一键收藏
0
评论
JS实现表格的动态增删改功能

功能：全选，全不选删除对应行修改数量（点修改按钮之前不可更改，点击后此按钮value变确定，数量可改，再点击value变为修改，数量不可改）增加行（直接在新增的行内输入数据，点击确定按钮后，不可更改）效果图：代码：增加行的代码我有一部分屏蔽了，那部分是另外一种方法，不过是写死的<!DOCTYPE html><html lang="en"><...
复制链接

扫一扫