这是在单击按钮时将表格行更改为表单的最佳方式吗

Is this this best way to change a table row into a form on button click?

本文关键字：表单 方式吗 最佳 表格 单击 按钮      更新时间：2023-09-26

我编写了下面的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属性使其不可编辑。当单击每行末尾的按钮时，corrosponding行将变回表单，而当单击cancel按钮时则相反。基本上，我只想让更有经验的人告诉我这是否是实现这一目标的最佳方式，如果不是，如何改进？

这似乎有点乏味。我建议为这两种状态创建CSS规则，并在行的父容器上添加/删除一个类，这样您就不必向多个元素添加多个类并调整大量CSS值。

即

.parent_row input{ /* stuff for disabled inputs*/}
.parent_row input{ /* stuff for disabled selects*/}
.parent_row .icon-ban{ /* stuff for disabled .icon-ban*/}
.parent_row.enabled input{ /* stuff for enabled inputs*/}
.parent_row.enabled input{ /* stuff for enabled selects*/}
.parent_row.enabled .icon-ban{ /* stuff for enabled inputs*/}

然后在JS中切换该类。

function enableform(x) {
var element = $("." + x); 
element.addClass("enabled");
element.prop("disabled", false);
return false;
};
function disableform(x) {
var element = $("." + x); 
element.removeClass("enabled"); 
element.prop("disabled", true);
return false;
};

不确定为什么要返回false，或者为什么要使用"disabled"属性。。。需要看到更多的代码来对此发表评论，所以我把它留在了代码

中

我建议在ROW中添加类（以隐藏/显示、使其可编辑等），而不是其中的每个元素。因此，在Click上，您可以让按钮获取它所在的行，然后在该行上设置一个类（类似于"可编辑"）。

你曾经有这样的造型：

input.disabled{
  --styles go here--
}
select.disabled{
  --styles go here--
}

你现在会有

tr.enabled input{
  --styles go here--
}
tr.enabled select{
  --styles go here--
}

您的代码可能需要改进。由于所有不同的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;
};

请注意，您可以在一个jquery命令中使用多个选择器语句。然后，您可以将不同的函数链接到同一个选择。

我注意到你返回了false，因为这些都是按钮按下，我猜你在html中放了onclick="dosomething（）"。与其这样做，不如将点击功能绑定到按钮：

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

我还没有测试我的代码，但它应该会让你朝着正确的方向前进。

相关文章：