0

以下のjQueryを作成して、リンクがクリックされたときにテーブルの行を編集可能な形式に変更できるようにしました。行のクラスが関数に渡されます。

function enableform(x) {

    $("." + x +" .disabled").prop("disabled", false);
    $(".icon-pencil").css("display", "none");
    $( "." + x +" input" ).removeClass("disabled");
    $( "." + x +" select" ).removeClass("disabled");
    $( "." + x +" td.dropdown" ).addClass("test");
    $( "." + x +" td" ).removeClass("dropdown");
    $("." + x +" .icon-ban").css("visibility", "visible");
    return false;
};

function disableform(x) {
    $( "." + x +" input" ).addClass("disabled");
    $( "." + x +" select" ).addClass("disabled");
    $( "." + x +" td.test" ).addClass("dropdown");
    $("." + x +" .disabled").prop("disabled", true);
    $(".icon-pencil").css("display", "block");
    $("." + x +" .icon-ban").css("visibility", "hidden");
    return false;
};

基本的に、フォームは既に存在しますが、クラスが適用されて静的テキストのように見え、disabled プロパティを使用して編集できなくなります。各行の最後にあるボタンをクリックすると、対応する行が元のフォームに戻り、キャンセル ボタンをクリックするとその逆になります。基本的に、経験豊富な人に、これがこれを達成するための最良の方法であるかどうかを教えてもらいたいだけです。そうでない場合は、どうすれば改善できますか?

4

3 に答える 3

1

あなたのコードは改善を使用できます。jquery の選択項目がすべて異なるため、非常に複雑で読みにくいように見えます。次のようにコードの一部を簡略化しました。

function enableform(x) {
    $("." + x +" .disabled").prop("disabled", false).removeClass("disabled");
    $( "." + x +" td.dropdown" ).addClass("test");
    $( "." + x +" td" ).removeClass("dropdown");
    $(".icon-pencil").hide();
    $("." + x +" .icon-ban").show();
    return false;
};

function disableform(x) {
    $( "." + x +" input select" ).addClass("disabled");
    $( "." + x +" td.test" ).addClass("dropdown");
    $("." + x +" .disabled").prop("disabled", true);
    $(".icon-pencil").css("display", "block");
    $("." + x +" .icon-ban").hide();
    return false;
};

1 つの jquery コマンド内で複数のセレクター ステートメントを使用できることに注意してください。次に、さまざまな機能を同じ選択に連鎖させることができます。

これらはボタンの押下であるため、 false を返していることに気付きました.htmlに onclick="dosomething()" を入れていると思います。これを行う代わりに、クリック関数をボタンにバインドします。

$("#buttonID").click(function(){
    Do code here.  $(this) is the object of the currently clicked button if we need it.
})

私は自分のコードをテストしていませんが、正しい方向に進むはずです。

于 2013-07-23T14:07:39.893 に答える