Selecting data from specific cells - javascript - jQuery
<p>I am using jvascript with jQuery. I have script as;</p>

<pre><code>$(document).ready( function() {
$('.ccc').click(function(index) {
  var $title = $(this);
  var $flag =  $title.parent().prev().children('.aaa').children('.bbb');
  var flag = $flag.text();
  alert(flag);
});
});
</code></pre>

<p>used with my table;</p>

<pre><code>&lt;table style="width: 100%"&gt;
  &lt;tr&gt;
    &lt;td rowspan="2"&gt;x&lt;/td&gt;
    &lt;td class="aaa"&gt;1&lt;span class="bbb"&gt;q&lt;/span&gt;&lt;/td&gt;
    &lt;td class="aaa"&gt;2&lt;span class="bbb"&gt;w&lt;/span&gt;&lt;/td&gt;
    &lt;td class="aaa"&gt;3&lt;span class="bbb"&gt;e&lt;/span&gt;&lt;/td&gt;
    &lt;td class="aaa"&gt;4&lt;span class="bbb"&gt;r&lt;/span&gt;&lt;/td&gt;
    &lt;td class="aaa"&gt;5&lt;span class="bbb"&gt;t&lt;/span&gt;&lt;/td&gt;
    &lt;td rowspan="2"&gt;x&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td class="ccc"&gt;6&lt;/td&gt;
    &lt;td class="ccc"&gt;7&lt;/td&gt;
    &lt;td class="ccc"&gt;8&lt;/td&gt;
    &lt;td class="ccc"&gt;9&lt;/td&gt;
    &lt;td class="ccc"&gt;10&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>The table has two rows (may contain more rows with same repeated pattern). The script is suppose to alert value on the cell just above the cell, <code>class="bbb"</code> i click <code>class="ccc"</code>. But instead, it displays data in all cells above that having <code>class="bbb"</code>. How can I solve this?? </p>

<p>You can see my fiddle <a href="http://jsfiddle.net/blasteralfred/hskVW/" rel="nofollow"><strong>here</strong></a>.</p>

<p>Thanks in advance..</p>
