CODEWITHSUNDEEP
jqueryjsp
Abhineet Kumar
Abhineet Kumar

Reputation: 306

Hide rows in JSP and based on values in a column

I have a table in JSP which displays the contents of a list in the following way:

<tbody>
    <c:forEach items="${A_List}" varStatus="status" var="alist">
        <tr role="row" id="colorRow">
            <td>${alist.A}</td>
            <td>${alist.B}</td
            <td>${alist.C}</td>
            <td id="ID1">${alist.D}</td>
        </tr>    
    </c:forEach>
</tbody>

Now the column D will be displaying several strings. I want to hide certain rows based on the value displayed. Let's say I just want to show the records which have the value "SHOWME" and hide the rest. I'm using the following jQuery code for that:

$(function agreed(){
    var arr=[];

    $("#ID1").each(function(){
        arr.push($(this).text());
    });

    $.each(arr,function(index,value){
        if(value != "AGREED"){
            ("#this").parent().hide();
        }
    });
});

However, nothing seems to happen. Now, here somehow it's being marked as a duplicate. But the answer to the question to which it is marked as a Duplicate doesn't work in my case.

Upvotes: 0

Views: 1887

Answers (1)

Anthony Grist
Anthony Grist

Reputation: 38345

You have a number of issues. First of all, the id attribute is intended to provide a unique identifier for an element, so you shouldn't be doing <td id="ID1">...</td> inside of a looping JSP tag. Use the class attribute instead.

Second, you create an array containing all of the text of the columns you're looking at. That's great, but it doesn't really do anything for you. There's no way to work backwards from the string to the specific element it came from.

Later on, you do $('#this').parent().hide(), which looks for an element with ID "this" (doesn't exist), gets the parent of any matched elements (there are none), and tries to hide them (no elements selected so does nothing).

What you could instead do is this:

$(function() {
    $('.ID1').filter(function() {
        return $(this).text() != 'AGREED';
    }).parent().hide();
});

That selects all of the <td> elements with the class (not id - see above on why you need to change it) of "ID1", filters them down to the ones where their text content doesn't match the values you want to keep, gets their parent element (the entire row), then hides them.

Upvotes: 1

Related Questions