使用DOM完成订单的添加、修改及删除操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/jscript" src="new_file.js" ></script>
</head>
<body>
<table id="table-1" border="1" width="600px" height="100px" align="center" cellspacing="0px">
<tbody id="info">
<tr align="center">
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</tbody>
<tr align="center">
</tr>
<tr align="center">
<td colspan="4">
<input type="button" value="增加订单" onclick="add()"/>
</td>
</tr>
</table>
<div id="inputbox" class="box">
名称:<input id="s1" type="text" />
<br>
数量:<input id="s2" type="text" />
<br>
价格:<input id="s3" type="text" />
<br>
<input style="width: 200px" type="button" value="确定" onclick="aadd()" />
</div>
<style>
.box{
width:50%;
margin-top:10%;
margin:auto;
padding:28px;
height:350px;
border:1px #111 solid;
display:none; //初始状态为隐藏，点击”增加订单“按钮后才会显示
text-align:center;
vertical-align:middle;
}
.box.show{
display:block;
}
.box input{
width:80%;
font-size:18px;
margin-top:18px;
}
#s1,#s2,#s3{
width: 200px;
}
</style>
</body>
</html>
var count = 0;
var counttd = 100;
var countbt = 1000;
var flag = 0;
var a = 0;
function add() {
document.getElementById("inputbox").style.display = 'block';
}
function aadd() {
var s1 = document.getElementById("s1").value;
var s2 = document.getElementById("s2").value;
var s3 = document.getElementById("s3").value;
document.getElementById("inputbox").style.display = 'none';
var tr = document.getElementById("info");
tr.innerHTML += "<tr id='" + count + "' align='center'>" + "<td>" + s1 + "</td>" + "<td id='" + counttd + "'>" + s2 + "</td>" + "<td>" + s3 + "</td>" + '<td><input type="button" value="删除" οnclick="delet(' + count + ')" /> <input id="' + countbt + '" type="button" value="修改" onclick="change(' + counttd + ',' + countbt + ')" /></td>' + "</tr>";
count++;
counttd++;
countbt++;
flag = 0; //让flagc重新等于0 否则会一直累加 下面flag==0//==1就无法判断
}
function delet(count) {
var row = document.getElementById(count);
row.remove(count); //删除id为count的行数据
}
function change(counttd, countbt) {//传递两个参数，counttd是点击修改后将td变为input，countbt是点击修改后将button的value改为确定
if (flag == 0) {
var td = document.getElementById(counttd);
td.innerText = null; //将td的内容变为空
var input = document.createElement("input"); //第一次点击修改时，在td里增加一个input
input.id = a; //给input一个id
td.appendChild(input); //将input添加到td节点下
var bt = document.getElementById(countbt);
bt.value = "确定"; //将修改按钮改为确定
}
if (flag == 1) { //第二次点击修改按钮
var a = document.getElementById(a); //或缺增加的input的id
a.style.display = 'none'; //使input隐藏
var td = document.getElementById(counttd); //获取要修改的td的id
td.innerText = a.value; //将input中输入的value赋给td
var bt = document.getElementById(countbt); //获取button的id
bt.value = "修改"; //将确定按钮改为修改
}
flag++; //按一次修改按钮就+1
}
