js动态操作订单表格

<!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;
    400px;
}
td{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    text-align:center;
    }
.title{    
    font-weight:bold;
    background-color: #cccccc;
}
input text{
    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='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>

相关阅读:
ArrayList实现原理及源码分析之JDK8
红黑树原理和算法介绍
 TreeMap实现原理及源码分析之JDK8
HashMap实现原理及源码分析之JDK8
mysql索引的使用
 HashMap实现原理及源码分析之JDK7
arthas Can not find tools.jar 使用报错
 idea maven 更新不到本地手动添加的 jar
Nodejs安装及环境配置
 安装独立版本的MAT
原文地址：https://www.cnblogs.com/wlx520/p/4500326.html