0

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

我没有设法切换输入字段的禁用属性，也没有切换之后的所有其他内容（在禁用/启用功能正常工作之前不能这样做）。

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

这是您可以在接下来的代码中看到的 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>

这是我第一次看JS，我认为enabler应该是这样的：

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

这就是我构建表格的方式：

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

在这里，您有“另一种观点”：http://jsfiddle.net/vL2rw/

4

1 回答 1

0

这是表格单元格的输入元素的工作解决方案。可能不是最好的代码，曾经与 jQuery 一起工作，所以请原谅我 =) http://jsfiddle.net/vL2rw/6/

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!");
}

Som 需要考虑： - 使用 jQuery 与 IE8 等较旧的浏览器兼容（或使用事件处理程序而不是事件侦听器） - 也许在通过 ajax 将值发送到数据库之前检查输入中的值是否已更改 - 我使用 "blur" 事件，如果你想这样改变为 enter-press

于 2013-11-10T13:39:40.333 回答