jsp中 使用js实现 行内修改

Question

怎样用js实现行内修改

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

Answer 1

<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; }