2021-09-29

2024-02-06 21:50:58

简单的增加订单修改删除

实现表格功能增加订单删除修改

css部分的内容

body{
	font-size:15px;
	line-height:20px;
	}
table{
	border-top: 1px solid;
	border-left: 1px solid
}
td{
	border-right: 1px solid;
	border-bottom: 1px solid;
	text-align:center;
	}

js内容

function dateFilter(date){
	    if(date < 10){return "0"+date;}
	    return date;
}

function deleteOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //行位置
	document.getElementById("order").deleteRow(row); 
}

function addOrder(){
   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*2;
   
   var col3=newRow.insertCell(2);
   col3.innerHTML=row_index*10+"元";
   
   var col4=newRow.insertCell(3);
   col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' οnclick=\"deleteOrder(this)\" />&nbsp;<input id='edit"+row_index+"' type='button' value='修改' οnclick=\"editOrder(this)\" />";

	}
	

	
function editOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //修改行所在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].innerHTML;
	var text=col[1].innerHTML;
	var text1=col[2].innerHTML;
	
	col[0].innerHTML="<input name='name"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[0].firstChild.focus();
	col[0].firstChild.select();
	col[1].innerHTML="<input name='num"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[1].firstChild.focus();
	col[1].firstChild.select();
	col[2].innerHTML="<input name='price"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[2].firstChild.focus();
	col[2].firstChild.select();
	
	col[3].lastChild.value="保存修改";
	col[3].lastChild.setAttribute("onclick","upOrder(this)");
	
	
	}
	
function upOrder(btn){
	var row=btn.parentNode.parentNode.rowIndex;   //行在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].firstChild.value;
	var text=col[1].firstChild.value;
	var text1=col[2].firstChild.value;
	col[0].innerHTML=text0;
	col[1].innerHTML=text;
	col[2].innerHTML=text1;
	col[3].lastChild.value="修改";
	col[3].lastChild.setAttribute("onclick","editOrder(this)");


}

完整代码

<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>订单</title>
<style type="text/css">

body{
	font-size:15px;
	line-height:20px;
	}
table{
	border-top: 1px solid;
	border-left: 1px solid
}
td{
	border-right: 1px solid;
	border-bottom: 1px solid;
	text-align:center;
	}

</style>
<script type="text/javascript">
	
//值小于10时，在前面补0
function dateFilter(date){
	    if(date < 10){return "0"+date;}
	    return date;
}

function deleteOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //行位置
	document.getElementById("order").deleteRow(row); 
}

function addOrder(){
   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*2;
   
   var col3=newRow.insertCell(2);
   col3.innerHTML=row_index*10+"元";
   
   var col4=newRow.insertCell(3);
   col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' οnclick=\"deleteOrder(this)\" />&nbsp;<input id='edit"+row_index+"' type='button' value='修改' οnclick=\"editOrder(this)\" />";

	}
	

	
function editOrder(btn){//参数就是按钮
	var row=btn.parentNode.parentNode.rowIndex;   //修改行所在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].innerHTML;
	var text=col[1].innerHTML;
	var text1=col[2].innerHTML;
	
	col[0].innerHTML="<input name='name"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[0].firstChild.focus();
	col[0].firstChild.select();
	col[1].innerHTML="<input name='num"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[1].firstChild.focus();
	col[1].firstChild.select();
	col[2].innerHTML="<input name='price"+row+"' style='width:50px;' type='text' value='"+text+"' />";
	col[2].firstChild.focus();
	col[2].firstChild.select();
	
	col[3].lastChild.value="保存修改";
	col[3].lastChild.setAttribute("onclick","upOrder(this)");
	
	
	}
	
function upOrder(btn){
	var row=btn.parentNode.parentNode.rowIndex;   //行在表格中的位置
	var col=btn.parentNode.parentNode.cells;
	var text0=col[0].firstChild.value;
	var text=col[1].firstChild.value;
	var text1=col[2].firstChild.value;
	col[0].innerHTML=text0;
	col[1].innerHTML=text;
	col[2].innerHTML=text1;
	col[3].lastChild.value="修改";
	col[3].lastChild.setAttribute("onclick","editOrder(this)");


}
</script>
</head>

<body>
<table border="1" id="order" cellspacing="0px">
<!-- <tr>
  	<td colspan="4">
  	<div id="myclock"></div></td>
 </tr> -->
  <tr class="title">
    <td>商品名称</td>
    <td>数量</td>
    <td>价格</td>
    <td>操作</td>
  </tr>
  <tr id="del1">
    <td>防滑真皮休闲鞋</td>
    <td>12</td>
    <td>500元</td>
    <td><input name="rowdelete"  type="button" value="删除" onclick='deleteOrder(this)' />
    <input id="edit1"  type="button" value="修改" onclick='editOrder(this)' /></td>
  </tr>
  <tr>
    <td>抗疲惫神奇钛项圈</td>
    <td>32</td>
    <td>￥76</td>
    <td><input type="button" value="删除" onclick='deleteOrder(this)' />
       <input type="button" value="修改" onclick='editOrder(this)'  />
   </td>
   </tr> 
  <tr>
    <input name="addOrder"  type="button" value="增加订单" onclick="addOrder()" /></td>
  </tr>

</table>
</body>
</html>

码农公寓

简单的增加订单 修改 删除

相关文章

简单的增加订单修改删除