CODEWITHSUNDEEP
javascriptjquery
Alfred
Alfred

Reputation: 21396

Selecting data from specific cells using jQuery

I am using JavaScript with jQuery. I have script as;

$(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);
});
});

used with my table;

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

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, class="bbb" I click class="ccc". But instead, it displays data in all cells above that having class="bbb". How can I solve this?

You can see my Fiddle here.

Upvotes: 0

Views: 112

Answers (5)

marcio
marcio

Reputation: 10512

Use the eq to get only the desired item ;)

$('.ccc').click(function(index) {
  var index = $(this).index(); //here is the trick
  var $title = $(this);
  var $flag =  $title.parent().prev().children('.aaa:eq('+index+')').children('.bbb'); //and here our new selector
  var flag = $flag.text();
  alert(flag);
});

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816404

If I understood you correctly, then you can do it as follows:

Get the index of the currently clicked cell:

var index = $(this).index();

Then select the cell with this index + 1 from the previous row:

$('.ccc').click(function() {
  var index = $(this).index();
  var $flag =  $(this).parent().prev().children().eq(index + 1).children('.bbb');
  alert($flag.text());
});

Updated DEMO

Reference: index, eq

Update: In fact, if every table cell only contains one .bbb element, you can also do:

var $flag =  $(this).parent().prev().find(`.bbb`).eq(index + 1);

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

try this: //output like: 1q/2w etc

$('.ccc').each(function(index, val) { (function() {
        $('.ccc:eq(' + index + ')').bind('click',
        function() {
            var $title = $(this);
            var $flag = $title.parent().prev().children('.aaa:eq(' + index + ')');
            var flag = $flag.text();
            alert(flag);
        });
    })(index)
});

another: //output like: q/w etc

$('.ccc').each(function(index, val) { (function() {
        $('.ccc:eq(' + index + ')').bind('click',
        function() {
            var $title = $(this);
            var $flag = $title.parent().prev().children('.aaa:eq(' + index + ')').children('.bbb');
            var flag = $flag.text();
            alert(flag);
        });
    })(index)
});

Upvotes: 0

Liangliang Zheng
Liangliang Zheng

Reputation: 1785

If this is what you want.

$('.ccc').click(function(index) {
  var $t= $(this);
  var idx = $t.prevAll('.ccc').size();
  var $flag =  $t.parent().prev().children('.aaa').eq(idx).children('.bbb');
  var flag = $flag.text();
  alert(flag);
});

http://jsfiddle.net/hskVW/1/

My second suggestion is ... well similar to abdullah.abcoder (the only difference is I think the result can be cache for event binding), please see : 

var $c = $('.ccc');
$('.aaa').each(function(i){
    var $t = $(this);
    $c.eq(i).click(function(){
        alert($t.children('.bbb').text());
    })
})

http://jsfiddle.net/hskVW/8/

My reason is, if your layout is not dynamic, you can retrieve the '.ccc' elements and bind the specific event only once, instead of traversing a lot in each click.

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94459

$(document).ready( function() {
$('.ccc').click(function(index) {
  var $title = $(this);
    var $flag =  $title.parent().prev().children('.aaa:first').prev();
  var flag = $flag.text();
  alert(flag);
});
});

Use the :first selector to get the first instance the class is used.

http://api.jquery.com/first-selector/

http://jsfiddle.net/ChrXQ/1

Upvotes: 0

Related Questions