javascript - HTML 按钮单击更改行的背景颜色

Question

我有一个 HTML 表格，每一行都有一个按钮。这里的目标是当一个按钮被点击时，整行的背景颜色都会改变。代码是:

<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="button" value="press" onclick="myFunction(this)" />
        </td>
    </tr>
    <tr>
        <td>Value3</td>
        <td>Value4</td>
        <td>
            <input type="button" value="press" onclick="myFunction(this)" />
        </td>
    </tr>
</table>

<script type="text/javascript">
    function myFunction(e) {
        //change the background color of the row
    }
</script>

你能帮我解决这个问题吗？谢谢!

Answer 1

您应该改用 class 并且为了更好的练习，请删除 html 中的内联函数调用。

使用这个:

HTML

<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="button" value="press" />
        </td>
    </tr>
    <tr>
        <td>Value3</td>
        <td>Value4</td>
        <td>
            <input type="button" value="press" />
        </td>
    </tr>
</table>

jQuery

var all_tr = $('tr');
$('td input[type="button"]').on('click', function () {
    all_tr.removeClass('selected');
    $(this).closest('tr').addClass('selected');
});

演示 here

(更新)