<!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=utf-8" />
<title>操作表格</title>
<script>
</script>
<style>
table{
border:1px solid #FF0;
}
table tr td{
border:1px solid #FF0;
text-align:center;
}
.title{
background-color:#0F0;
}
</style>
<script>
function editRow(obj){
var numCell = obj.parentNode.parentNode.cells[1];
if(obj.innerHTML == "修改订单数量"){
numCell.innerHTML = "<input type='text'/>";
obj.innerHTML = "确认";
}
else if(obj.innerHTML == "确认"){
var num = numCell.firstChild.value;
numCell.innerHTML = num;
obj.innerHTML = "修改订单数量";
}
};
function addOrder(){
var tb = document.getElementById("tb1");
tb.set
var row_index = tb.rows.length-1;
var newRow = tb.insertRow(row_index+1);
newRow.id = "tr"+row_index+1;
var col0 = newRow.insertCell(0).innerHTML="纪宁的妖孽人生";
var col1 = newRow.insertCell(1).innerHTML="20";
var col2 = newRow.insertCell(2).innerHTML="10块";
var col3 = newRow.insertCell(3).innerHTML="<button οnclick='delRow(this)'>删除</button>";
var col4 = newRow.insertCell(4).innerHTML="<button οnclick='editRow(this)'>修改订单数量</button>";
};
function delRow(obj){
var tb = document.getElementById("tb1");
var nowRow = obj.parentNode.parentNode;
tb.deleteRow(nowRow.rowIndex);
};
</script>
</head>
<body>
<table id="tb1" border="1" cellspacing="0" cellpadding="0">
<tr class="title">
<td>书名</td>
<td>数量</td>
<td>价格</td>
<td colspan="2">操作</td>
</tr>
<tr>
<td>荒天帝的妖孽人生</td>
<td>12</td>
<td>5毛</td>
<td><button οnclick="delRow(this)">删除</button></td>
<td><button οnclick="editRow(this)">修改订单数量</button></td>
</tr>
</table>
<button οnclick="addOrder()">增加订单</button>
<button>修改标题样式</button>
</body>
</html>
257
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
