突出显示表格中的选定行

Question

I am having a table in a html.

<table>
  <tr>
    <td>
     <button onclick="someFunction()">
    </td>
    <td>data</td>
  </tr>
  <tr>
    <td>
     <button onclick="someFunction()">
    </td>
    <td>data</td>
  </tr>
  <tr>
    <td>
     <button onclick="someFunction()">
    </td>
    <td>data</td>
  </tr>
</table>

Each row having a dynamic id ,Here is my question I want highlight the current row of the table which button been pressed .

How can I achieve it?

Answer 1

A good approach will be is to change your markup like

<table id="mytable">
    <tr>
        <td><button>click</button></td>
        <td>data</td>
    </tr>
    <tr>
        <td><button>click</button></td>
        <td>data</td>
    </tr>
    <tr>
        <td><button>click</button></td>
        <td>data</td>
    </tr>
</table>

and

#mytable tr.highlight{
    background-color: yellow;
}

then

$('#mytable button').click(function(){
    $('#mytable tr.highlight').removeClass('highlight');
    $(this).closest('tr').addClass('highlight');
    someFucntion();
})

Demo: Fiddle

Answer 2

Use closest() in jquery to select the parent <tr> .

HTML

<tr><td><button onclick="someFucntion(this)"></td><td>data</td></tr>

JS

function someFunction(elm){
 $("tr.highLightClass").removeClass("highLightClass");// remove class if it is having someone
$(elm).closest("tr").addClass("highLightClass"); // here selected row

}

DEMO

If you want to use "best practice", remove all inline handlers. Try this:

$("button.someClass").click(function () {
    $("tr.highLightClass").removeClass("highLightClass"); // remove class if it is having someone
    $(this).closest("tr").addClass("highLightClass"); // here selected row

});

DEMO

Answer 3

Onclick is outdated and is a very bad practice.. Add a class / id to selector..

<table>
<tr><td><button class="clickMe"></td><td>data</td></tr>
</table>

JavaScript :

$('body').on("click", ".clickMe", function(){
    var that = this;
    that.closest("tr").addClass("highlightMe");
});

Why use on?

If your table is being generated dynamically or rows are being added on the go, you should watch the new dynamic elements as well..

Answer 4

From your question I understand the following: when you click the button inside the you want the corresponding <tr> to be highlighted.

Here's a JSFiddle demonstrating my answer: http://jsfiddle.net/WBison/2vkfn5uy/2/

Basically, use the event object to retrieve the target node (the button), then the parent of that (the <td> ), then the parent of THAT (the <tr> ). Then just use any method you'd like to change the style.

Code:

Button function call: <button onclick="someFunction(event)">

function someFunction(e) {
    e.target.parentNode.parentNode.style.backgroundColor = "blue";
}

Hope this helps.