Javascript 启用禁用的文本字段并保存修改后的值

我制作了一个php页面，其中一个表是从数据库构建的。每个单元格都是一个禁用的输入文本，应该通过鼠标点击激活。启用和修改后，按enter键（我打开了其他解决方案，我还没有考虑这一点）应将新值存储在数据库中，在表中显示并再次禁用该字段

我没有设法切换输入字段的disabler属性，也没有切换之后的所有属性（在disable/enable功能正常工作之前，我无法切换）

这些是代码的一部分，可以帮助您理解我的意思

这是您可以在下面代码中看到的CSS：

<style type="text/css">
    .clickable, input[type="text"]:disabled, input[type="number"]:disabled {
        cursor: hand;
    }
    .clickable:hover {
        background: #dcd2ff;
    }
    input[type="text"]:disabled, input[type="number"] {
        background-color: rgba(255,0,0,0);
        border: 0px;
        width: 100%;
        height: 100%;
    }
</style>

。可单击，输入[type=“text”]：禁用，输入[type=“number”]：禁用{
光标：手；
}
.可点击：悬停{
背景：#dcd2ff；
}
输入[type=“text”]：禁用，输入[type=“number”]{
背景色：rgba（255,0,0,0）；
边界：0px；
宽度：100%；
身高：100%；
}

这是我第一次看JS，我认为启用码应该是：

<script type="text/javascript">
    function edit(cellID) {
        var cell = document.getElementById(cellID);
        cell.disabled = !cell.disabled;
    }
</script>

函数编辑（cellID）{
var cell=document.getElementById（cellID）；
cell.disabled=！cell.disabled；
}

这是我如何构建表格的：

<table>
    <?php
        // DB connection + select query
        for ($i = 0; $i < $num; $i++)
        {
            // Getting, for example, $a and $b values
            $line_color = ($i % 2 == 0) ? "pair" : "dispair";
            echo "<tr class=\"$line_color\">";
            echo "    <td class=\"clickable\">";
            echo "        <input id=\"$i-1\" onclick=\"edit('$i-1')\" type=\"text\" value=\"$a\" disabled />";
            echo "    </td>";
            echo "    <td class=\"clickable\">";
            echo "        <input id=\"$i-2\" onclick=\"edit('$i-2')\" type=\"number\" value=\"$b\" disabled />";
            echo "    </td>";
            echo "</tr>";
        }
    ?>
</table>

下面是一个用于表格单元格的输入元素的有效解决方案。可能不是最好的代码，用于处理jQuery，所以请原谅我=）

var clickables=document.getElementsByClassName（“clickable”）；
对于（变量i=0；i

Som需要考虑的要点：
-使用jQuery与旧浏览器（如IE8）兼容（或使用事件处理程序而不是事件侦听器）
-在通过ajax将值发送到db之前，可能会检查输入中的值是否已更改
-我使用“模糊”事件，更改为按enter键，如果您希望这样做
我需要问您一件事，我不知道何时/如何调用“save（）”。。。谢谢！哦，我明白了。。。谢谢太好了，我将通过php实现到db的连接。。。
var clickables = document.getElementsByClassName("clickable");
for(var i = 0; i < clickables.length; i++){
    clickables[i].addEventListener("click", edit, true);
}

function edit(){
    var input = this.getElementsByTagName("input")[0];
    input.removeAttribute("disabled");
    input.focus();
    input.addEventListener("blur", save, false);
}

function save(){
    this.setAttribute("disabled", "disabled");
    // Do your saving here (by ajax?)
    alert("Save!");
}