Question

我有这个简单的代码：

<html>
<head>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("#sme table tr").bind("mouseenter mouseleave", function()
{
    $(this).toggleClass("one");
});
$("#sme table tr").bind("click", function()
{
    $("#sme table tr").removeClass("two");
    $(this).toggleClass("two");
});

$("#sme table tr").bind("dblclick", function()
{
    $.each($(this).find("input"), function(k,v)
{
       $(this).parent().unbind("dblclick");
       $(this).removeAttr("readonly");
});
});
$("#sme table tr").bind("blur", function()
{
    $.each($(this).find("td input"), function(k,v) {
      $(this).attr("readonly","readonly");
});
});
});
</script>
<style type="text/css">
table { border-collapse:collapse;}
table tr td {padding: 6px;}
.one {background-color: yellow;}
.two {background-color: orange;}
input {width:30px;}
</style>
</head>
<body>
<div id="sme">
<table border="1">
<tr><td>1</td><td><input type="text" value="20" readonly="readonly"/></td><td><input type="text" value="3" readonly="readonly"/></td></tr>
<tr><td>2</td><td><input type="text" value="22" readonly="readonly"/></td><td><input type="text" value="3" readonly="readonly"/></td></tr>
<tr><td>3</td><td><input type="text" value="23" readonly="readonly"/></td><td><input type="text" value="3" readonly="readonly"/></td></tr>
<tr><td>4</td><td><input type="text" value="24" readonly="readonly"/></td><td><input type="text" value="3" readonly="readonly"/></td></tr>
</table>
</div>
</body>
</html>

或http://jsfiddle.net/x9CMC/以获得更高的可靠性。

我做了一个函数，在双击时，readonly属性已从该行的所有输入中删除。

我想用模糊函数读取值（来自每个单元格，无论该单元格是否包含输入）（意味着如果我点击其他地方，我想显示包含该行中所有值的警报并添加{{ 1}}输入）。

我将模糊动作绑定但是它无法正常工作，有些不对劲......

如果我编辑了第4行并点击其他地方，我想显示这样的警告readonly。

怎么样？

谢谢

Answer 1

http://jsfiddle.net/ZcMCg/1

模糊操作不起作用，因为它是具有焦点的输入，而不是行。与mouseenter / mouseleave焦点和模糊事件不同，它不会冒泡（但我不会接受它，我只是醒了）。

随着你的表越来越大，你可能希望顺便看一下jQuery的事件委托（委托（）或on（）以及1.7 API中传递的额外选择器。

Answer 2

您应该在这里使用自定义活动，这会让您的生活更轻松。

考虑这个jQuery代码：

$(function() {
    $("#sme table tr")
    .hover(function() {
        $(this).toggleClass("hl");
    })
    .bind("lock", function() {
        $(this).removeClass("open")
        .find("input").attr("readonly", "readonly");
    })
    .bind("unlock", function() {
        $(this).addClass("open")
        .find("input").removeAttr("readonly")
        .first().focus();
    })
    .dblclick(function() {
        $(this).trigger(
          $(this).is(".open") ? "lock" : "unlock"
        )
        .siblings("tr.open").trigger("lock");
    });
});

（见this jsFiddle中的行动）

这里发生的事情是：

我创建了两个自定义事件，“锁定”和“解锁”单个行。他们处理更改<tr> CSS类并将<input>元素连续排列为只读
我已经挂钩触发这些事件到双击一行。双击锁定的行将其解锁，反之亦然（这就是trigger()所做的）。

正如您所看到的，一旦您将编辑行中涉及的步骤分开，代码就会变得更加清晰。

注意：

无需一次又一次地重复相同的选择器（在您的情况下为$("#sme table tr")和$(this)）。只需将更多方法链接到单个选择器，就像我一样。
blur元素没有<tr>个事件。只能形成可以focus blur的元素。
无需在选择器上调用each()。您对它所做的一切将自动完成所有选定的元素。例如：$("a").hide()会隐藏整个页面上的每个<a>。
捕获mouseenter和mouseleave的事件在jQuery中称为hover。
无需调用bind()，大多数jQuery事件都有本机处理程序。例如，bind("click", function() {})相当于click(function() {})

在编辑表行输入值并在jquery中单击其他位置后，读取它们

2 个答案: