編輯它們，然後點擊別的地方jQuery中

我這個簡單的代碼之後被讀出錶行輸入值：編輯它們，然後點擊別的地方jQuery中

<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屬性從該行的所有輸入中刪除。

我想讀值（從每一個細胞，無論該單元格中包含輸入與否）與模糊函數（也就是說，如果我點擊別的地方，我想從該行顯示的所有值警報，並添加readonly輸入）。

我綁定一個模糊的行動，但它不能正常工作，什麼是錯的...

如果我編輯的第4行，我點擊別的地方，我想表明這樣4, new value edited by me, new value edited by me警報。

怎麼樣？

謝謝

來源

2012-01-14 Snake Eyes

http://jsfiddle.net/ZcMCg/1

模糊動作並沒有工作，因爲它是有重點，而不是該行的輸入。不同於mouseenter/mouseleave的焦點和模糊事件不會冒泡（但不要拿我說的話，我只是醒了）。

隨着你的表格變得越來越大，你可能希望看看jQuery的事件委託（delegate（）或on（）以及在1.7 API中傳遞的額外選擇器）。

來源

2012-01-14 12:12:52 Flo

您應該在這裏使用自定義事件，這會讓您的生活更加輕鬆。

考慮這個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)）。只需將更多方法鏈接到單個選擇器，就像我一樣。
<tr>元素沒有blur事件。只有表格元素可以有focus可以blur。
無需在選擇器上調用each()。你對它做的每件事都會自動完成所有選定的元素。例如：$("a").hide()將在整個頁面上隱藏每個<a>。
捕獲mouseenter和mouseleave的事件在jQuery中被稱爲hover。
沒有必要調用bind()，大多數jQuery事件都有本地處理程序。例如bind("click", function() {})相當於click(function() {})

來源

2012-01-14 13:40:04 Tomalak

編輯它們，然後點擊別的地方jQuery中

回答

相關問題