Question

我有一个表格，每行有1个按钮，点击该行显示的按钮税将应用于客户端，我需要向最终用户显示一些指示。为了这个目的，我想在点击时更改按钮css（颜色，txt等）。以下是代码 -

<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>

和我正在使用的jquery是 -

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

但我收到错误 - 未捕获TypeError：对象[object Object]没有方法'$'。有人可以让我知道如何解决它吗？

Answer 1

jsFiddle Demo

HTML ID应该是唯一的，因此您应该不让所有按钮具有相同的ID。为此目的使用class属性。但是，要简单地更改选择的上下文，正确的语法是：

$(selector, context);

更好的方法是完全删除onclick属性，并在jQuery中完全处理事件：

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

Answer 2

<input id="taxId" type="text" /><br />

<input onclick="applyTax(this, '1');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />
<input onclick="applyTax(this, '2');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />
<input onclick="applyTax(this, '3');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />


<script>
function applyTax(btn, taxIdValue)   {
    $('#taxId').val(taxIdValue);
    $(btn).css("background-color","yellow");
}
</script>

演示：http://jsfiddle.net/NFGkj/

但最好使用jquery事件绑定。

如何识别按钮阵列中的按钮单击

2 个答案: