Question

我编写了下面的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属性用于使它们不可编辑。单击每行末尾的按钮时，相应的行将更改回表单，而单击取消按钮时则相反。基本上我只是希望有经验的人告诉我这是否是实现这一目标的最佳方式，如果没有，又如何改进？

Answer 1

我建议在ROW中添加类（隐藏/显示，制作可编辑等）而不是内部的每个元素。所以onClick你可以让按钮获取它所在的行，然后在该行上设置一个类（类似于“可编辑”）。

你过去常常使用这样的样式：

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

你现在有

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

Answer 2

这似乎有点单调乏味。我建议为这两种状态创建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或者为什么要弄乱“禁用”属性...需要在那里看到更多代码来评论，所以我把它留在代码中< / p>

Answer 3

您的代码可以使用改进。由于所有不同的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.
})

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

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

3 个答案: