<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM表格操作</title>
<style>
td {
width: 150px;
height: 30px;
}
#table {
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<table border="1" cellpadding="0" cellspacing="0" id="table">
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td>篮球</td>
<td>5</td>
<td>￥48</td>
<td><input type="button" value="删除" onclick="delOrder(this)"><input type="button" value="修改"
onclick="updateOrder(this)"></td>
</tr>
<tr>
<td>足球</td>
<td>1</td>
<td>￥45</td>
<td><input type="button" value="删除" onclick="delOrder(this)"><input type="button" value="修改"
onclick="updateOrder(this)"></td>
</tr>
<tr>
<td>排球</td>
<td>2</td>
<td>￥56</td>
<td><input type="button" value="删除" onclick="delOrder(this)"><input type="button" value="修改"
onclick="updateOrder(this)"></td>
</tr>
<tr>
<td colspan="4"><input type="button" value="添加订单" onclick="addOrder()"></td>
</tr>
</table>
</div>
<script>
/*
*
*
*添加
*
*/
function addOrder() {
var table = document.getElementById('table');
var myRow = table.insertRow(table.rows.length - 1);
for (let i = 0; i < 3; i++) {
var mytd = myRow.insertCell();
mytd.innerHTML = '<input type="text">';
}
var mybtn = myRow.insertCell();
mybtn.innerHTML = '<input type="button" value="删除" onclick="delOrder(this)"><input type="button" value="修改" onclick="updateOrder(this)">';
}
/**
* 删除
*
*/
function delOrder(currentObj) {
var table = document.getElementById('table');
//获取行对象
var obj = currentObj.parentNode.parentNode;
//获取对应的索引,并且删除该元素
table.deleteRow(obj.rowIndex)
}
/**
* 修改
*
*/
function updateOrder(currentObj) {
//1:首先获取该单元格对象
var table = document.getElementById('table');
var obj = currentObj.parentNode.parentNode;
for (let i = 0; i < obj.cells.length - 1; i++) {
var oldValue = obj.cells[i].innerHTML;
//需要价格判断，新添加的单元格内容是没有的，可能会出现显示标签的情况
if (oldValue.indexOf('input') !== -1) {
oldValue = '';
}
obj.cells[i].innerHTML = "<input type='text' value='" + oldValue + "'>";
}
obj.cells[obj.cells.length - 1].innerHTML = '<input type="button" value="删除" onclick="delOrder(this)"><input type="button" value="确认" onclick="confirmOrder(this)">';
}
/**
* 确认操作，是数据保存修改，处于不可编辑状态
* @param currentObj
*/
function confirmOrder(currentObj) {
var table = document.getElementById('table');
var obj = currentObj.parentNode.parentNode;
for (let i = 0; i < obj.cells.length - 1; i++) {
var oldValue = obj.cells[i].getElementsByTagName('input')[0].value;
obj.cells[i].innerHTML = oldValue;
}
//将按钮变回原来状态
obj.cells[obj.cells.length - 1].innerHTML = '<input type="button" value="删除" onclick="delOrder(this)"><input type="button" value="修改" onclick="updateOrder(this)">';
}
</script>
</body>
</html>
