How to Highlight the Table Row on Click

how to highlight a table row when one of its cell is clicked using jquery

You can do it with jQuery by adding a class to the parent tr of the clicked td:

$(function() {
    $('td').click(function() {
        $('tr').removeClass('active');
        $(this).parent().addClass('active'); 
    });
});

JSFiddle

Highlight table row on click based on table ID

You're nesting "click handlers, so the one for the td wasn't getting triggered. Instead you need to:

1. Add a handler for the click on the td only. This will:
2. Get parent table of the clicked td (so it doesn't change any other table) using closest()
3. ...find() the row with the clickedrow class
4. ...and remove the class.
5. Then highlight the clicked row by getting the parent row of the clicked td using parent()
6. ...and add the class to it

This is the completed function:

$(document).ready(function() {
  //Highlight clicked row
  $('.table-layout td').on('click', function() {
    // Remove previous highlight class
    $(this).closest('table').find('tr.clickedrow').removeClass('clickedrow');
    // add highlight to the parent tr of the clicked td
    $(this).closest('tr').addClass("clickedrow");
  });
});

Working Example:

$(document).ready(function() {

  //Highlight clicked row
  $('.table-layout td').on('click', function() {
  
    // Remove previous highlight class
    $(this).closest('table').find('tr.clickedrow').removeClass('clickedrow');
    
    // add highlight to the parent tr of the clicked td
    $(this).parent('tr').addClass("clickedrow");
  });
});

.table-layout .clickedrow td{
  background-color: #caaf8f;
}

.table-layout {
  /*text-align: center;*/
  border: 1px solid black;
  border-collapse: collapse;
  font-family: arial-narrow, helvetica, sans-serif;
  font-weight: 100;
  font-size: 13px;
  margin: 0 auto 0;
  margin-bottom: 20px;
  /*float:left;*/
  height: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.table-layout td,
.table-layout th {
  border: 1px solid grey;
  padding: 3px 3px 0;
  height: 20px;
  line-height: 20px;
  width: 100px;
}

.table-layout td {
  text-align: left;
  background-color: #fff;
}

.table-layout th {
  background-color: #eea647;
  height: 22px;
  line-height: 22px;
}

.selected {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="itemtable" class="table-layout">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<br/>
<table id="ordertable" class="table-layout">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Highlight table row when clicked in angular

If only highlight single row item case:

<tr mat-row *matRowDef="let row; columns: displayedColumns;let index = index" (click)="clickEvent(index)" [class.blue]="index == cindex"></tr>

cindex: number
clickEvent(index) {
    this.cindex = index
}

Highlight table row on button click

I'm not quite sure if this is what you were trying to achieve but if I understood your question correctly, this should help you.

Also next time you might wanna add the buttons that are included in your image since we don't have the code you have, this will be easier and save time for the people who are trying to help you.

<button data-value="highlight_row_pending">Pending</button>
<button data-value="highlight_row_accomp">Accomplished</button>

<table id="maintenance_table" class="table table-striped table-bordered" cellpadding="0" border="1" width="100%">
  <thead>
    <tr>
        <th></th>
        <th>#</th>
        <th>Complex</th>
        <th>Unit#</th>
        <th>Date Requested</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
        <tr>
        <th scope="row"><input type="radio" class="radioBtn" name="selectRow" value="checked" /></th>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
        <td align="center">Information</td>
    </tr>
  </tbody>
</table>

jQuery

$("button").each(function(){
    $(this).click(function(){
    var button_value = $(this).data("value");
    $("tr").each(function(){
      if($(this).find("input[type='radio']").is(':checked')){
        $(this).children("td").removeClass().addClass(button_value);
      }
    });
  });
});

Added jsFiddle https://jsfiddle.net/0nnxnxsq/1/

HTML+JavaScript: How to highlight a row on click of a button in Javascript?

Here you go! Add a function to your button onclick while creating it and write a function as below:

DEMO

So changed button html before appending will be

document.write("<td><button type='button' onclick='highlight(this)'>select</button></td>")
                                          ^^^^^Add this

and a function

function highlight(ctrl){
   var parent=ctrl.parentNode.parentNode;
   parent.style.background='red';
}

---

UPDATE

To remove previous selected on click of other below is one of the approach you can opt to:

DEMO

CSS

.backChange{
    background:red;
}

JS

Scenario 1

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr'); //get all the tr elements
   for(var i=0;i<elements.length;i++)
        elements[i].className=''; //clear the className from all the tr elements
   var parent=ctrl.parentNode.parentNode;
   parent.className="backChange"; //add ClassName to only this element's parent tr

}

Scenario 2

Now If you have classList that are already there in tr and you just want to add or remove one particular class which changes its style then you can do it as below:

DEMO

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr');
    for(var i=0;i<elements.length;i++)
        elements[i].classList.remove('backChange'); //remove one particular class from list of classNames in that element
   var parent=ctrl.parentNode.parentNode;
   parent.classList.add("backChange");//Add that particular class to classList of element's parent tr
}

---

UPDATE 2

Without using Class and applying inline styles you can try as below:

DEMO

function highlight(ctrl){
   var elements=document.getElementsByTagName('tr');
    for(var i=0;i<elements.length;i++)
        elements[i].style.background=''; //remove background color
   var parent=ctrl.parentNode.parentNode;
   parent.style.background="red";//add it to specific element.

}

How can I highlight a table row based on a cell click?

The function needs events as its first parameter.

And two minor issues: 1) Correct $table to $('#table') and 2) Remove parent function.

Here is the solution:

$('#table').on("click-cell.bs.table", function (e, field, value, row, $element) {

if (field === 'Delete') {
        $element.toggleClass('bg_delete');
   }
});

Only highlight table rows that are clicked on in React

This example will work if you need to highlight only one row

toggleActive(id) {
  this.setState({
     rowIsActive: id,
  });
}

render() {
  const EventsList = this.props.eventList.map((event) => {
    return scenario.list.map((event) => {
      return (
        <TableRow
          className={`tr ${this.state.rowIsActive === event.id ? 'active' : ''}`}
          key={event.id}
          handleClick={() => this.toggleActive(event.id)}
        >
          <Table.Td className="td">{event.name} </Table.Td>
          <Table.Td>
            <div>{event.location}</div>
            <div>{event.numberofpeople}</div>
            <div>{event.host ? event.host : null}</div>
            <div>{event.type ? pickevent.type : null}</div>
            <div>{event.style ? event.style : null}</div>
          </Table.Td>
          <Table.Td>{event.country}</Table.Td>
        </TableRow>
      );
    });
  });

  return <Fragment>{EventsList}</Fragment>;
}

---

Related Topics