Javascript 这是在单击按钮时将表行更改为表单的最佳方法吗？

我编写了下面的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属性使其不可编辑。单击每行末尾的按钮时，相应的行将变回一个窗体，单击“取消”按钮时则相反。基本上，我只是想让更有经验的人告诉我这是否是实现这一点的最佳方法，如果不是，如何改进？

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

您以前使用的样式如下：

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

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

你现在应该

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

---

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

您以前使用的样式如下：

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

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

你现在应该

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

---

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

即

然后在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”属性…需要在那里看到更多的代码来对此进行评论，所以我把它留在了代码中，这似乎有点乏味。我建议为这两个状态创建CSS规则，并在行的父容器上添加/删除一个类，这样就不必向多个元素添加多个类，也不必调整大量CSS值

即

然后在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”属性…需要查看更多代码来对此进行评论，因此我将其保留在代码中您的代码需要改进。由于所有不同的jquery选择，它看起来非常复杂且难以阅读。我简化了一些代码，如下所示：

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

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.
})

---

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

您的代码需要改进。由于所有不同的jquery选择，它看起来非常复杂且难以阅读。我简化了一些代码，如下所示：

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

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.
})

---

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

如果您没有创建单个元素，而是有一个空的“可编辑”行，您可以用单击来替换一个不可编辑的行，然后只需设置正确的值？如果没有创建单个元素，而是有一个空的“可编辑”行你可以用单击替换一个不可编辑的字段，然后只设置正确的值？除了几个链接之外，我不会显示/隐藏元素，我正在改变表单字段的外观，使其不再像字段，并将其禁用，以便无法编辑。对。。。所以改变外观的样式会放在上面写着“样式放在这里”的地方。这可能包括从显示/隐藏到更改边框、颜色、字体等任何内容。对不起，读错了您的文章！现在说得通了！除了几个链接之外，我没有显示/隐藏元素，我正在改变表单字段的外观，使它们不再像字段，并将其禁用，以便无法编辑。对。。。所以改变外观的样式会放在上面写着“样式放在这里”的地方。这可能包括从显示/隐藏到更改边框、颜色、字体等任何内容。对不起，读错了您的文章！现在说得通了！