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

本文主要是介绍订单删除，增加订单，巩固表单特定用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

方法一：

<!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);//设置idvar 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>