<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>修改订单</title>

<style type="text/css">

body{

    font-size:13px;

    line-height:25px;

    }

table{

    border-top: 1px solid #333;

    border-left: 1px solid #333;

    width:400px;

}

td{

    border-right: 1px solid #333;

    border-bottom: 1px solid #333;

    text-align:center;

    }

.title{

    font-weight:bold;

    background-color: #cccccc;

}

input text{

    width:100px;

}

</style>

<script type="text/javascript">

function addRow(){

   var addTable=document.getElementById("order");

   var row_index=addTable.rows.length-1;       //新插入行在表格中的位置

   var newRow=addTable.insertRow(row_index);  //插入新行

   newRow.id="row"+row_index;                 //设置新插入行的ID

   var col1=newRow.insertCell(0);

   col1.innerHTML="抗疲劳神奇钛项圈";

   var col2=newRow.insertCell(1);

   col2.innerHTML=row_index;

   var col3=newRow.insertCell(2);

   col3.innerHTML="&yen;49.00";

   var col4=newRow.insertCell(3);

   col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' onclick=\"delRow('row"+row_index+ "')\" />&nbsp;<input id='edit"+row_index+"' type='button' value='修改' onclick=\"editRow('row"+row_index+ "')\" />";

    }

function delRow(rowId){

    var row=document.getElementById(rowId).rowIndex;   //删除行所在表格中的位置

    document.getElementById("order").deleteRow(row);

    }

function editRow(rowId){

    var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置

    var col=document.getElementById(rowId).cells;

    var text=col[1].innerHTML;

    col[1].innerHTML="<input name='num"+row+"' style='width:40px;' type='text' value='"+text+"' />";

    col[3].lastChild.value="确定";

    col[3].lastChild.setAttribute("onclick","upRow('"+rowId+ "')");

    /*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" />&nbsp;<input id='edit"+row+"' type='button' value='确定' onclick=\"upRow('"+rowId+ "')\" />"    */

    }

function upRow(rowId){

    var row=document.getElementById(rowId).rowIndex;   //修改行所在表格中的位置

    var col=document.getElementById(rowId).cells;

    var text=col[1].firstChild.value;

    col[1].innerHTML=text;

    col[3].lastChild.value="修改";

    col[3].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");

/*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" />&nbsp;<input id='edit"+row+"' type='button' value='修改' onclick=\"editRow('"+rowId+ "')\" />"*/    

    }

</script>

</head>

<body>

<table border="0" cellspacing="0" cellpadding="0" id="order">

  <tr class="title">

    <td>商品名称</td>

    <td>数量</td>

    <td>价格</td>

    <td>操作</td>

  </tr>

  <tr id="del1">

    <td>防滑真皮休闲鞋</td>

    <td>12</td>

    <td>&yen;568.50</td>

    <td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' />

    <input id="edit1" type="button" value="修改" onclick='editRow("del1")' /></td>

  </tr>

  <tr>

    <td colspan="4" style="height:30px;">

    <input name="addOrder" type="button" value="增加订单" onclick="addRow()" /></td>

  </tr>

</table>

</body>

</html>

js动态操作订单表格的更多相关文章

  1. js动态的往表格中加入表单元素

    效果如图: 这里我用的是layui的静态表格,其他框架也是一样的(只要你都表单元素要通过js进行渲染),我的需求是在表单中放了表格的元素,表格中还有表单的元素.表格中的行数据是js动态添加的,正常的添 ...

  2. Js动态操作表格

    HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  3. 使用JS动态操作css的集中方法

    内联样式 在咱们深入一些复杂的知识之前,先回来顾一下一些基础知识.例如,咱们可以通过修改它的.style属性来编辑给定的HTMLElement的内联样式. const el = document.cr ...

  4. 通过js动态生成页面表格

    var redlineTemplateP = $(".redlineDataList"); for (var index in detailArraryLists.rows){ v ...

  5. js动态操作DOM

    创建一个元素 createElement() 向元素末尾添加一个子节点 appendChild() 将新的元素插入到指定元素的前面 insertBefore(new,old); 删除一个子节点 rem ...

  6. js 动态操作元素

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  8. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  9. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

随机推荐

  1. 第十四节：pandas之merge（）合并

    Pandas提供了一个merge()函数,作为DataFrame对象之间所有标准数据库连接操作的入口pandas.merge(left,right,how='inner',on=None,left_o ...

  2. DOMContentLoaded 与onload区别以及使用

    一.何时触发这两个事件? 1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完 ...

  3. Django——1 环境搭建

    Django 什么是Django 使用前的准备工作 新建项目 开启服务器 新建APP 简单实战 什么是Django框架 http服务器:用来接受用户请求,并将请求转发给web应用框架进行处理.Web应 ...

  4. 【[Offer收割]编程练习赛14 D】剑刃风暴(半径为R的圆能够覆盖的平面上最多点数目模板)

    [题目链接]:http://hihocoder.com/problemset/problem/1508 [题意] [题解] 求一个半径为R的圆能够覆盖的平面上的n个点中最多的点数; O(N2log2N ...

  5. WPF的TextBox以及PasswordBox显示水印文字

    1.TextBox <ControlTemplate x:Key="WaterMarkTextBox" TargetType="{x:Type TextBox}&q ...

  6. [POJ1733]Parity game（并查集 + 离散化）

    传送门 题意:有一个长度已知的01串,给出[l,r]这个区间中的1是奇数个还是偶数个,给出一系列语句问前几个是正确的 思路:如果我们知道[1,2][3,4][5,6]区间的信息,我们可以求出[1,6] ...

  7. 用c++编程：用两个栈实现队列

    栈s1和栈s2,栈s1专门为入队,栈s2专门为出队. 入队: 当s1和s2都为空时,直接入队s1. 当s1为空,s2不为空时,把s2的元素都倒回s1,然后再入队s1 出队: 当s2不为空时,直接出队s ...

  8. 认识GIT之入门

    前言 GIT是非常优秀的源代码版本管理工具,经过几年的发展,已经变得非常成熟以及流行,不同于其他的源代码管理系统,值得使用.GIT官网下载在线安装包,经常会中途退出,很有可能的原因是被墙了,所以建议使 ...

  9. 一起talk C栗子吧（第七十七回：C语言实例--DIY ls命令续）

    各位看官们,大家好.上一回中咱们说的是DIY cat命令的样例.这一回咱们说的样例是:DIY ls命令续. 闲话休提,言归正转.让我们一起talk C栗子吧! 我们在前面的章回中DIY过ls命令.时间 ...

  10. [PWA] Optimize Assets Delivery using preload and prefetch

    By default, browsers load the assets in a render-blocking way. Modern browsers introduced prefetch a ...