Question 253010 in Html Question posted in
Some basic documentation can be found here.

Html – change the background of an item when another item is clicked

I am trying to write a code to a HTML page, in which there is a table of values. I want that a click on any row of the table changes the background color of another element, basically just a box, to highlight it amongst the other boxes. I am relatively new to JS, HTML, CSS, so I haven’t quite made it work.

Rn, i got the click on the row to actually change the color of the box, but with a couple problems. Only the first row of the table works, and it doesn’t change back to the original after i "unclick" it.

Anyone can help? Thanks in advance.

the code i have at the moment is this:

<style> 
  #row{
    position:relative;
  }
  
  #sensor{
  width:30px;
  height:22px;
  margin: 0 0 -15px 0;
  background-size:100%;
  background: white;  
  background-repeat:no-repeat;
  overflow:hidden;

    border: 1px solid black;
  position:absolute;
  left: 70px; top: 100px;
  z-index: 1;
  }  
  #sensor.clicked {background: greenyellow}
</style> 

<div>
    <table> 
        <tbody>
            <tr id="row">
                <td> various table rows </td>
            </tr>
        </tbody>
    </table>
</div> 

 $('#row').on('click', function () {
     $("#sensor").addClass('clicked');

  });

<div>
                  
 <div id="sensor">CON</div>
                  
</div>
Tags:

2

Answers


  1. 0

    If you are learning to code and manipulate the DOM try not to rely on jQuery. Here’s the outline of a pure JavaScript solution which will work in all modern web browsers.

    The document.getElementById method gets a reference to the HTML table element using its unique id.

    The addEventListener method is used to attach a handler function to process click events on the table.

    Within the handler function there is a guard to check if the element click has the sensor class before toggling the clicked class on the element.

    const tableHandle = document.getElementById("table-id");

tableHandle.addEventListener("click", function(event){
  if (event.target.classList.contains("sensor")) { 
    event.target.classList.toggle("clicked");
  }
});
    .row {
  position: relative;
}
  
.sensor {
  width: 30px;
  height: 22px;
  margin: 0 0 -15px 0;
  background-size: 100%;
  background-color: blue; 
  background-repeat: no-repeat;
  overflow: hidden;
  border: 1px solid black;
  left: 70px;
  top: 100px;
  z-index: 1;
}

.sensor.clicked {
  background: greenyellow;
}
    <div>
  <table id="table-id"> 
    <tbody>
      <tr class="row">
        <td class="sensor"> various table rows </td>
        <td class="sensor"> various table rows </td>
        <td class="sensor"> various table rows </td>
      </tr>
      <tr class="row">
        <td class="sensor"> various table rows </td>
        <td class="sensor"> various table rows </td>
        <td class="sensor"> various table rows </td>
      </tr>
      <tr class="row">
        <td class="sensor"> various table rows </td>
        <td class="sensor"> various table rows </td>
        <td class="sensor"> various table rows </td>
      </tr>
    </tbody>
  </table>
</div>

    If you insist on using jQuery, the following snippet will work in place of the JavaScript code.

    $(".sensor").on("click", function () {
  $(this).toggleClass("clicked");
});
    Login or Signup to reply.
  2. 0

    The following uses a delegated event listener, bound to the parent table ( id='womble' ), to intercept click events that happen within it and it’s child elements.

    Because of event propagation you can inspect the event to find the element upon which the event was initially triggered and deduce whether it is a table row or table cell etc. From there you can easily toggle the desired change of class for the element with ID sensor

    If the table has more than one row you would need to use a class='row' attribute instead of the ID or, alternatively, use a dataset attribute such as data-id='row' which is permissable.

    Notice that clicking on the same cell twice will toggle both the sensor class and the cell itself whereas clicking on separate cells will only toggle the sensor class.

    const tbl = document.getElementById('womble');
const div = document.getElementById('sensor');

tbl.addEventListener('click', e => {
  const item = e.target;

  if (item instanceof HTMLTableRowElement || item instanceof HTMLTableCellElement) {
    div.classList.toggle('clicked');
    item.classList.toggle('active');
  }
});
    table,
td {
  border: 1px solid grey;
  border-collapse: all;
}

td {
  padding: 0.25rem;
  cursor: pointer;
  border: 1px dashed grey;
  background: white;
  transition: ease-in-out all 250ms;
}

#sensor {
  width: 30px;
  height: 22px;
  margin: 0 0 -15px 0;
  background-size: 100%;
  background: white;
  background-repeat: no-repeat;
  overflow: hidden;
  border: 1px solid black;
  position: absolute;
  left: 70px;
  top: 100px;
  z-index: 1;
  transition: ease-in-out all 250ms;
}

#sensor.clicked {
  background: greenyellow
}
td.active {
  background: rgba(0, 255, 0, 0.1)
}
    <table id='womble'><!-- name / id chosen at random -->
  <tbody>
    <tr class="row">
      <td> various table rows </td>
      <td> more table data </td>
    </tr>
    <tr class="row">
      <td> various table rows </td>
      <td> and some more data </td>
    </tr>
  </tbody>
</table>

<div id='sensor'></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search