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

方法一：

<!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>
posted @ 2017-06-20 16:31  斯丢皮德曼  阅读(638)  评论(0)  编辑  收藏  举报