Finding a row with a cell with a specific value

Question

I have to mark all rows in a table (and later change the code to delete the rows).

The table structure looks like:

<table class="table table-striped table-condensed" id="buckettable">
            <thead>
                ...cut out
            </thead>
            <tbody>
                <tr class="success">
                    <td><input class="fld-bucketno" type="checkbox" name="bucket" value="158bf61f-8f66-4dee-9ff6-b9d1f6d4b840" /></td>
                    <td class="text-right">
                        <a class="bucketNo" href="/Sim/Staging/1212">1212</a>
                    </td>

What I am interested in is the value of the anchor in the td - second last line.

I get a json list of id's to delete. First I mark them, then change the code to delete them. That is the idea, at least. Mind me - I know a lot of programming, but Javascript is an unknown land for me ;)

My code so far is:

success: function (resp) {
                var table = $('#buckettable').find('tbody')[0];

                var length = resp.length;
                for (var i = 0; i < length; i++) {
                    var bucketNo = resp[i];
                    var rows = table.children.length;
                    for (var j = 0; j < rows; j++) {
                        var row = table.children[j];
                        var bucket = row.find('.bucketNo').text();
                        if (bucket == bucketNo) {
                            alert(bucket);
                        }
                    }
                }
                $('#cleanup').modal('hide');

and I fail to filter the rows. I am open to any sensible other approach - hopefully it teaches me a lot.

In the above code I manage to get the row... but then the find('.bucketNo') fails with an aexception that Object # has no method find.... which I find funny because I use that on a form earlier. Pointers to documentation VERY welcome, especially in addition to an answer.

If there is a better way to do that tell me. I was told that search by ID is faster (obviously) but somehow I am not sure - should I set a coded ID (bucket-xxx, xxx being the number) on every row?

Answer 1

There is a much simpler way of doing this.

var targetBucketNo = 1212;
$('#buckettable a.bucketNo')
  .filter(function(item) {
    return item.text() == targetBuvketNo;
  })
  .parent()
  .remove();

To explain in more detail. The following will get the anchors with the bucketNo class that are inside your #buckettable table.

$('#buckettable a.bucketNo')

Filter will filter the results for ones that have the target bucket number

.filter(function(item) {
    return item.text() == targetBuvketNo;
 })

Remove will remove the elements

.remove();

You can replace .remove() with .addClass('your-class-name') if you wanted to add a class instead. This would add it to the td element so you should add .parent() before addClass .

Answer 2

You are accessing the native Javascript children , hence find() is not a function. However you can skip around a lot of the native functions you're using by using the jQuery filter method:

var $aTag = $('#buckettable').find('tbody td a.bucketNo').filter(function() {
    return $(this).text() == bucketNo
});
alert($aTag.text());

Answer 3

You can also loop all links with the class "bucketNo" and then look if the ID is in your array. After this get the containing TR and delete it or add a class or something:

var resp = [2323,5656]

$('a.bucketNo').each(function() {
    if( resp.indexOf( parseInt($(this).text()) ) != -1 )
        $(this).closest('tr').addClass('del');
});

http://jsfiddle.net/44cEt/