订单删除，增加订单，巩固表单特定用法

最新推荐文章于 2022-07-14 16:01:01 发布

会做饭的技术男

最新推荐文章于 2022-07-14 16:01:01 发布

阅读量389

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hji2j1bb20jb&title=%E8%AE%A2%E5%8D%95%E5%88%A0%E9%99%A4%EF%BC%8C%E5%A2%9E%E5%8A%A0%E8%AE%A2%E5%8D%95%EF%BC%8C%E5%B7%A9%E5%9B%BA%E8%A1%A8%E5%8D%95%E7%89%B9%E5%AE%9A%E7%94%A8%E6%B3%95

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            text-align: center;
        }
    </style>
    <script>
        function delRow(id) {
            //取得要删除的那一行
            var row = document.getElementById(id);
            var table = document.getElementById('mytb');
            table.deleteRow(row.rowIndex);
        }
        function addrow() {
            var mytb = document.getElementById('mytb');
            var index = mytb.rows.length - 1;//取得插入目标索引
            var row = mytb.insertRow(index);//创建一个行
            var id = 'row' + row.rowIndex;//拼接id
            row.setAttribute('id', id);//设置id
            var td0 = row.insertCell(0);//td0创建一个单元格
            td0.innerHTML = "好看耐用超耐磨沙发两件套";
            var td1 = row.insertCell(1);
            td1.innerHTML = row.rowIndex;
            var td2 = row.insertCell(2);//创建一个input按钮
            td2.innerHTML = '<input type="button" value="删除订单" onclick="delRow(\'' + id + '\')">';
        }
    </script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" id="mytb">
    <tr>
        <td>商品名</td>
        <td>数量</td>
        <td>操作</td>
    </tr>
    <tr id="del1">
        <td>好看耐用超耐磨沙发两件套</td>
        <td>24</td>
        <td><input type="button" value="删除订单" onclick="delRow('del1')"></td>
    </tr>
    <tr>
        <td colspan="3"><input type="button" value="增加订单" onclick="addrow()"></td>
    </tr>
</table>
</body>
</html>

方法二：不同的地方就是input按钮的创建方法比较新颖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font: 13px/25px 宋体;
        }

        table {
            width: 360px;
            border-top: 1px solid #333;
            border-left: 1px solid #333;
        }

        tr {
            height: 30px;
        }

        table tr td {
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function delRow(id) {
            //取得要删除的那一行
            var row = document.getElementById(id);
            var table = document.getElementById('mytable');
            table.deleteRow(row.rowIndex);
        }
        function addRow() {

            var table = document.getElementById('mytable');

            //要插入的位置
            var index = table.rows.length - 1;
            var row = table.insertRow(index);//只要知道行，可以知道其索引


            var td0 = row.insertCell(0);
            td0.innerHTML = '抗疲劳神奇钛项圈';

            var td1 = row.insertCell(1);
            td1.innerHTML = row.rowIndex;

            var td2 = row.insertCell(2);
            td2.innerHTML = '¥49.00';

            var td3 = row.insertCell(3);
            var input = document.createElement('input');
            input.setAttribute('type', 'button');
            input.setAttribute('value', '删除');
            input.onclick = function () {
                table.deleteRow(row.rowIndex);
            }
            td3.appendChild(input);


        }
    </script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="mytable">
    <tr>
        <td>商品名称</td>
        <td>数量</td>
        <td>价格</td>
        <td>操作</td>
    </tr>
    <tr id="del1">
        <td>防滑真皮休闲鞋</td>
        <td>12</td>
        <td>¥568.50</td>
        <td><input type="button" value="删除" onclick="delRow('del1')"></td>
    </tr>
    <tr>
        <td colspan="4"><input type="button" value="增加订单" onclick="addRow()"></td>
    </tr>
</table>
</body>
</html>

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
订单删除，增加订单，巩固表单特定用法

方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { text-align: center; } </style> <script>
复制链接

扫一扫