以下の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 プロパティを使用して編集できなくなります。各行の最後にあるボタンをクリックすると、対応する行が元のフォームに戻り、キャンセル ボタンをクリックするとその逆になります。基本的に、経験豊富な人に、これがこれを達成するための最良の方法であるかどうかを教えてもらいたいだけです。そうでない場合は、どうすれば改善できますか?