日期:2014-05-16 浏览次数:20620 次
function editRow(id) {
var rowId = document.getElementById(id);//获得当前行
var row_input = rowId.children.item(2).children.item(1); //获得确定按钮
row_input.setAttribute("onclick", "editRow(" + id + ")");
if (row_input.value == "确定") {
row_input.value = "修改";
var row_value = row_input.children.item(1).children.item(0).value;
rowId.cell[1].innerHTML = row_value; //将text里的值给TD
row_input.class = "text"; //隐藏input
} else {
row_input.value = "确定";
var tdValue = rowId.cell[1].innerHTML;
rowId.children(1).item(0).value = tdValue;
rowId.children.item(1).children.item(0).value = '';
row_input.class = "text1";
}
}
function edit(id){
var title = document.getElementById("table").rows[0];
title.className = "title";
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex
alert(i);
document.getElementById("table").deleteRow(i)
}
</script>
<style type="text/css">
#table{ border:1;}
.title{ text-align:center;font-weight:bold; background-color:#cccccc;}
.text{ display:none;}
.text1{
display:block;
text-align:center;
}
</style>
</head>
<body>
<table id="table" >
<tr id="tr1">
<td>书名</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="tr2">
<td>编程艺术</td>
<td>100¥</td>
<td>
<input type="button" value="删除" onclick="deleteRow(this)"/>
<input type="button" value="修改" onclick="editRow(tr2)"/>
</td>
</tr>
<tr id="tr3">
<td>asp.net</td>
<td>100¥</td>
<td>
<input type="button" value="删除" onclick="deleteRow(this)"/>
<input type="button" value="修改" onclick="editRow(tr3)"/>
</td>
</tr>
<tr colspan="3" >
<td><input type="button" value="增加订单" onclick="addRow()" /></td>
</tr>
</table>
<input type="button" value="删除第二行" onclick="add()"/>
<input type="button" value="增加一行" />
<input type="button" value="修改标题样式" onclick="edit()" />
<input type="button" value="复制到最后一行"/>
</body>
</html>