Question

我正在尝试使表格单元格值动态。初始状态是普通显示。单击，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 + "'>&nbsp;&nbsp;&nbsp;&nbsp;<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>

使用onclick的setAttribute在不需要时触发该函数

0 个答案: