问题描述
- 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;
}