Question

I have a table with 1 button in each row, on click of button tax shown in that row will be applied to the client and i need to show some indication to end user. I want to change the button css(color, txt ect.) on click for that purpose. Below is the code –

<table class="data report_table">       
                        <tbody>
                        <c:forEach var="taxVO" items="${taxVo}" varStatus="item">
                        <tr class="${item.index % 2 == 0 ? 'odd gradeX' : 'even gradeC'}">                          
                            <td><c:out value="${taxVO.taxName}" /></td>
                            <td><input type="button" class="btn-icon" value="Apply" id="applyTaxButton" onClick="applyTax('${taxVO.taxId}');"></input>
                            </td>   
                        </tr>
                        </c:forEach>
                        </tbody>
                    </table>

and jquery i am using is –

function applyTax(taxIdValue)   {
    $('#taxId').val(taxIdValue);
    $(this).$('#applyTaxButton').css("background-color","yellow");
}

but i am getting error – Uncaught TypeError: Object [object Object] has no method ‘$’. Can someone please let me know how to fix it?

Answer 1

jsFiddle Demo

HTML IDs should be unique, so you should not have the all buttons having the same ID. Use the class attribute for that purpose. However, to simply change the context of your selection, the correct syntax is:

$(selector, context);

A better approach is to remove the onclick attribute altogether, and handle the event completely in jQuery:

$(function() {
    $('.report_table').on('click', '.btn-icon', function() {
        $(this).css('background-color', 'yellow');
        $('.btn-icon').not(this).css('background-color', 'transparent');
    });
});​