Question

57

HTML button click change the background color of the row

rated 0 times [ 63] [ 6] / answers: 1 / hits: 15803 / 11 Years ago, thu, august 29, 2013, 12:00:00

I have an HTML table that has a button on every row. The objective here is when a button is clicked, the whole row will got the background color changed.
The code is:

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

Can you help me with this? Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

albert

Add To Favorites

Follow

Total Points: 652

Total Questions: 105

Total Answers: 108

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

albert questions

1 MUI v5 - Extending Typography variant in TypeScript creates error No overload matches this call

Wed, Nov 17, 21, 00:00, 3 Years ago

1 Update one, insert if not exists and modify only when a condition is true MongoDB

Thu, Mar 19, 20, 00:00, 4 Years ago

1 React - input loses focus on keypress

Sat, Nov 9, 19, 00:00, 5 Years ago

1 Multiple select fields filtering with jQuery

Thu, Oct 24, 19, 00:00, 5 Years ago

1 How to update redux state using a react variable passed up to the component from a child

Wed, Sep 25, 19, 00:00, 5 Years ago

View All

answered 11 Years ago annalise · Accepted Answer

You should use class instead and for good practise remove the inline function calls inside your html.

Use this:

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');

});

Demo here

(updated)