JavaScript订单操作小程序完整版

2024-05-06 16:37:59

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了完整的订单操作小程序（增加订单，删除订单，修改订单数量），供大家参考，具体内容如下

<!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);//按照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 = "好看耐用超耐磨沙发两件套";//设置td0的内容      var td1 = row.insertCell(1);      td1.innerHTML = row.rowIndex;//把行的索引赋给td1的内容      var td2 = row.insertCell(2);//把td2插入在某个单元格里面      td2.innerHTML = '<input type="button" value="删除" onclick="delRow(/'' + id + '/')">' +        '<input type="button" value="修改" id="update" onclick="update(/'' + id + '/')">';    }    function update(id) {      var row = document.getElementById(id);      var td1 = row.cells[1];      var v = td1.innerHTML;      td1.innerHTML = '<input type="text" style="width:30px" value="' + v + '">';      row.cells[2].innerHTML = '<input type="button" value="删除" onclick="delRow(/'' + id + '/')">' +        '<input type="button" value="确定" id="update" onclick="comfirmrow(/'' + id + '/')">';    }    function comfirmrow(id) {      var row=document.getElementById(id);      var td1=row.cells[1];//取得各行的第二个单元格      var input=td1.firstChild;//取得input标签      var v=input.value;//取得input的内容      td1.innerHTML=v;//把内容赋给td1      var td2=row.cells[2];      td2.innerHTML = '<input type="button" value="删除" onclick="delRow(/'' + id + '/')">' +        '<input type="button" value="修改" id="update" onclick="update(/'' + 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')"><input type="button" value="修改"></td>  </tr>  <tr>    <td colspan="3"><input type="button" value="增加订单" onclick="addrow()"></td>  </tr></table></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JavaScript实现简单的树形菜单效果

下一篇：JavaScript对象_动力节点Java学院整理