<!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. 第二节:numpy之数组切片、数据类型转换、随机数组

  2. 内存管理(malloc和free的用法)

    内存管理 1.堆和栈的区别: 1>栈的特征 1).执行的速度相对较快: 2).空间较小: 3).生存期由系统决定: 4).作用域较小: 5).有名空间,可以通过变量名或者数据名访问: 2> ...

  3. mysql-sql语句中变量的使用

    最近工作中用到mysql,发现mysql和Oracle差别挺大的,其不像Oracle中存在丰富的分析函数(开窗函数),如rank(),lag(),leaf()等,只能用变量来获取以便达到分析函数的效果 ...

  4. js递归解决汉诺塔问题

    汉诺塔是一个印度的古老传说.有三个圆柱,其中一个圆柱上放着若干圆盘,这些圆盘从上到下,直径递增,利用一个辅助圆柱,将原来柱子上的圆盘放到另一个柱子上,依旧是从上到下直径递增. 汉诺塔是一个经典的递归案 ...

  5. LINUX 内核基础

    http://blog.csdn.net/acs713/article/details/42836335

  6. Intellij Idea 13:导入openfire源代码

    网络上已经有篇关于openfire导入到Intellij Idea的文章(http://www.th7.cn/Program/java/201404/187018.shtml),不过在我导入的过程中, ...

  7. Atitit.一个cms有多少少扩展点,多少api&#160;wordpress&#160;&#160;cms有多少api。。扩展点

    Atitit.一个cms有多少少扩展点,多少api wordpress  cms有多少api. . 扩展点 1. Api分类 WordPress APIs 1 1.1. 1 函数分类 2 1.2. 函 ...

  8. Top10Servlet

    <span style="font-size:18px;">/** * Top10 * author:杨鑫 */ package servlet; import jav ...

  9. 查询结果多个合并一个GROUP_CONCAT(EmployeeName)

    一个课程多个教师,查询结果单条显示,其中课程与教师关系是一一对应存入表中

  10. zoj1940

    链接:点击打开链接 题意:三维搜索'S'为起点,'E'为终点,求走出的最短时间 代码: #include <iostream> #include <stdio.h> #incl ...