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

基本上表单已经存在，但应用了类以使其看起来像静态文本，并且禁用属性用于使它们不可编辑。单击每行末尾的按钮时，相应的行将更改回表单，单击取消按钮时则相反。基本上我只是希望有更多经验的人告诉我这是否是实现这一目标的最佳方法，如果不是，如何改进？

4

3 回答 3

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--
}
于 2013-07-23T14:02:03.487 回答
1

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

IE

.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或为什么要弄乱“禁用”属性...需要在那里查看更多代码才能对此发表评论，因此我将其留在了代码中

于 2013-07-23T14:02:06.800 回答
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;
};

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

我注意到您返回 false 因为这些是按钮按下，我猜您正在将 onclick="dosomething()" 放入您的 html 中。而不是这样做将单击功能绑定到按钮：

$("#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 回答