0

データベースからテーブルを作成する php ページを作成しました。すべてのセルは無効な入力テキストであり、マウスのクリックによってアクティブになるはずです。有効にして変更したら、Enter キーを押すと (私は他のソリューションに開かれていますが、この点についてはまだ考えていませんでした)、データベースに新しい値を保存し、テーブルに表示して、フィールドを再度無効にする必要があります。

入力フィールドのdisabler属性を切り替えることも、その後のすべてを切り替えることもできませんでした（無効化/有効化機能が適切に機能するまで、それを行うことはできません）。

これらは、私の言いたいことを理解するのに役立つかもしれないコードの一部です。

これは、次のコードで確認できる 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 を見るのはこれが初めてですが、イネーブラーは次のようにすべきだと思います。

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

- IE8 などの古いブラウザとの互換性のために jQuery を使用する (または、イベント リスナーの代わりにイベント ハンドラーを使用する) 「ぼかし」イベントを使用します。そのようにしたい場合は、Enter-Pressに変更します

于 2013-11-10T13:39:40.333 に答える