表格的修改
将修改内容变成框(input标签),将原内容按照字符串拼接放在value里
失去焦点后,将框变成文本,并将文本内容变成框的value值
为了避免连续点修改按钮,框内的值将变成input的源码,所以要加上判断单元格的内容是不是数字
function update(){
var cell=document.getElementById("cell");
/*修改单元格内容*/
//判断是否是数字,避免连续点击两次,单元格内容变成input标签源码
if(!isNaN(cell.innerHTML))
{cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='updateRow2(this)'>"; /*字符串的拼接*/
}
}
/*失去焦点*/
function updateRow2(inp){
var cell=document.getElementById("cell");
cell.innerHTML=inp.value;
}
代码示例:
<html>
<head>
<title>js 操作表格</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function delRow(btn)
{
var ta=document.getElementById("ta");
var tr=btn.parentNode.parentNode;
ta.deleteRow(tr.rowIndex);
}
/*修改*/
function update(){
var cell=document.getElementById("cell");
/*修改单元格内容*/
//判断是否是数字,避免连续点击两次,单元格内容变成input标签源码
if(!isNaN(cell.innerHTML))
{cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' οnblur='updateRow2(this)'>"; /*字符串的拼接*/
}
}
/*失去焦点*/
function updateRow2(inp){
var cell=document.getElementById("cell");
cell.innerHTML=inp.value;
}
</script>
<style type="text/css">
#ta{
margin:auto;
}
#ta tr{
height:35px;
}
</style>
</head>
<body>
<hr />
<table border="1px" id="ta">
<tr style="text-align: center; font-weight: bold;">
<td width="200px">书名</td>
<td width="100px">作者</td>
<td width="100px">价格</td>
<td width="100px">购买数量</td>
<td width="200px">操作</td>
</tr>
<tr id="t1">
<td>java</td>
<td>我</td>
<td>40.0</td>
<td id="cell">3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="update()"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr >
<td>js</td>
<td>gg</td>
<td>77.60</td>
<td>2</td>
<td align="center">
<input type="button" name="" id="" value="修改数量"onclick="update()" />
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<tr>
<td>Spring入门</td>
<td>mm</td>
<td>78.88</td>
<td>300</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="update()"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
</td>
</tr>
</table>
</body>
</html>