Read a table row input values after editing them and clicking somewhere else in jquery
<p>I have this simple code:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(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");
});
});
});
&lt;/script&gt;
&lt;style type="text/css"&gt;
table { border-collapse:collapse;}
table tr td {padding: 6px;}
.one {background-color: yellow;}
.two {background-color: orange;}
input {width:30px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="sme"&gt;
&lt;table border="1"&gt;
&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="20" readonly="readonly"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="3" readonly="readonly"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="22" readonly="readonly"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="3" readonly="readonly"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="23" readonly="readonly"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="3" readonly="readonly"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="24" readonly="readonly"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" value="3" readonly="readonly"/&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>or <a href="http://jsfiddle.net/x9CMC/" rel="nofollow">http://jsfiddle.net/x9CMC/</a> for more reliability.</p>

<p>I did a function which at double click, the <code>readonly</code> attribute was removed from all input from that row.</p>

<p>I want to read values (from every cell, no matter if that cell contains input or not) with blur function (means if I click somewhere else, I want to show an alert with all values from that row and add <code>readonly</code> to input).</p>

<p>I binded a blur action but it doesn't work properly, something is wrong ...</p>

<p>If I edited the 4th row and I click somewhere else, I want to show alert like this <code>4, new value edited by me, new value edited by me</code>.</p>

<p>How ?</p>

<p>Thank you</p>
