我正在尝试使表格单元格值动态。初始状态是普通显示。单击,div将更改为输入框和确认按钮。单击按钮,我希望它恢复到旧的仅显示模式。但是,第二个函数不仅设置了onclick属性,还因某种原因触发了click事件。我只希望div返回状态0.点击可编辑。尝试添加一个监听器,但结果相同。请帮我。提前谢谢。
请在此处找到JSFiddle链接:http://jsfiddle.net/vjunky123/1bj90kx1/5/
脚本和HTML代码:
<script>
function showinputbox(divid) {
alert("Inside show function");
var div = document.getElementById(divid);
var oldVal = div.firstChild.nodeValue;
div.innerHTML = "<input type='text' value='" + oldVal + "'> <input type='button' value='Confirm' onclick=\"confirminput('" + divid + "')\">";
div.setAttribute("onclick", '');
}
function confirminput(divid2) {
alert("Inside confirm function");
//xmlhttp = new XMLHttpRequest();
var div = document.getElementById(divid2);
var newVal = div.getElementsByTagName('input');
div.innerHTML = newVal[0].value;
//div.setAttribute("onclick","function() {showinputbox('"+divid2+"');}");
div.onclick = function() {
showinputbox(divid2);
};
}
</script>
<table class="bordered">
<tbody>
<tr>
<th>Rack ID</th>
<th>Server Count</th>
</tr>
<tr>
<td>A12</td>
<td>
<div id="1_A12" onclick="showinputbox('1_A12')">5</div>
</td>
</tr>
<tr>
<td>A19</td>
<td>
<div id="1_A19" onclick="showinputbox('1_A19')">1</div>
</td>
</tr>
</tbody>
</table>