问题描述

jsp中 使用js实现 行内修改

怎样用js实现行内修改

表格一行共有5列数据 第6列为修改按钮 点击修改 第四列和第五列变成可编辑的文本框，修改变成“确定”和“取消” 确定修改后保存到数据库中
ps:修改另一行时要判断之前是否有正在编辑的文本框

解决方案

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="javascript:void(0);" onclick="onEdit(this.parentNode.parentNode)">修改</a></td>
</tr>

function onEdit(trObj){
var inputs = document.getElementsByName('tempInput');//判断是否有文本框
if(inputs.length>0){
alert("正在编辑");
return;
}
var tds = document.getElementsByTagName('td');
trObj.lastChild.innerHTML = '<a href="javascript:void(0);" onclick="onShow(this.parentNode.parentNode)">保存</a>';
tds[3].innerHTML = '<input name="tempInput" type="text" />';
tds[4].innerHTML = '<input name="tempInput" type="text" />';

}
function onShow(trObj){
// 保存操作
trObj.lastChild.innerHTML = '<a href="javascript:void(0);" onclick="onEdit(this.parentNode.parentNode)">修改</a>';
var tds = document.getElementsByTagName('td');
tds[3].innerHTML = tds[3].firstChild.value;
tds[4].innerHTML = tds[4].firstChild.value;
}