What is the best way to emphasize a table column when a cell is selected?

I successfully implemented a feature where a cell (td-element) is highlighted when clicked by the user.
However, I now want the entire column to be highlighted with the cell itself having a slight variation.
I am struggling with achieving the last part, which is highlighting the entire column. Any assistance with this is greatly appreciated.

The desired result would look something like this:

https://i.sstatic.net/ZCx7z.png

function handleBlur(event) {
event.target.contentEditable = false;
}

document.querySelector('body').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'td') {
event.target.contentEditable = true;
event.target.focus();
event.target.addEventListener("blur", handleBlur);      
    }
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
  margin: 50px 0 0 50px;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th {
  background-color: white;
}

table td[contentEditable=true]{
-webkit-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
-moz-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
outline: 3px solid #086AA7;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus </td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari </td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer №1

In the modern era, achieving this task without the need for jQuery is now much simpler thanks to utilizing the native DOM APIs.

To accomplish this, you first need to determine the index of the chosen cell among its parent's children (by using the cellIndex property), then proceed to iterate through the columns and modify the background of the relevant col within the colgroup:

function handleBlur(event) {
  event.target.contentEditable = false;
}

var cols = document.querySelectorAll('col'); // locate and store the columns

document.querySelector('body').addEventListener('click', function(event) {
  var t = event.target;
  if (t.tagName.toLowerCase() !== 'td') {
    return;
  }

  t.contentEditable = true;
  t.focus();
  t.addEventListener("blur", handleBlur);

  var highlightIndex = t.cellIndex; // index of the selected item in the row

  cols.forEach(function(col, index) { // cycle through the columns
    col.style.background = index === highlightIndex ? 'lightblue' : null; // apply background to the selected col, and remove from others
  });
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
  margin: 50px 0 0 50px;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

table td[contentEditable=true] {
  box-shadow: inset 0px 0px 0px 200px rgba(186, 210, 225, 0.51);
  outline: 3px solid #086AA7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <colgroup> <!-- add a colgroup with a col item for each column -->
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus </td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari </td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the npm server error in my Vue.js application?

After recently setting up Node.js and Vue.js, I decided to dive into my first project on Vue titled test. As part of the process, I attempted to configure the server using the command: npm run server However, I encountered the following error message: C ...

Manipulating JSON Elements using JavaScript in HTML

My objective is to alternate the visibility between the "prev" and "ext" elements retrieved from the JSON File in the following manner: Here is the link to JS Fiddle The menu bar appears as follows: [ "prev_Person1" "Person1" "ext_Person1" ... "Person2" ...

Angular Material failing to adapt to mobile devices

My website was created using Angular Material and looks great on desktop, but is completely broken and out of place when viewed on mobile devices. I'm thinking it might be because I haven't set the column size for each element properly. Any advic ...

HTML, JavaScript, and PHP elements combine to create interactive radio buttons that trigger the appearance and disappearance of mod

On my page, I have multiple foreach loops generating divs with different information. These divs are displayed in modals using Bootstrap. However, I am encountering an issue where if I select a radio button and then close the modal and open another one, th ...

Exploring the intricacies of Node-Craigslist syntax

Greetings! I am currently utilizing the node-craigslist package found at https://github.com/brozeph/node-craigslist and I am in need of assistance with some syntax related to the details method. The documentation provides the following example: client . ...

Assign a class when a path is clicked using Leaflet.js

My goal is to apply a specific class to the clicked polygon by using the following code: function addClass() { function style(feature) { return { className: "active" }; } } function onEachFeature(feature, layer) { ...

Ways to keep the footer at the bottom of the page without relying on the fixed positioning method

I’ve been tackling a responsive design issue on my website but I can't quite get the footer to stick at the bottom of the page. The 'fixed' property hides half of my text on mobile devices, so I turned to this solution (https://getbootstra ...

Shifting the position of personalized tabs using Jquery

I have created some basic HTML/CSS tabs and I want to move to the next tab by clicking a link at the bottom of every tab. HTML <ul class="tabs"> <li class="active"> <a href="#">Explainer (2mins)</a> <div class=" ...

What is the best way to create a point within a mesh?

I have several meshes and I'd like to insert a point randomly within the confines of hexagon[0]. How can this be achieved? var Hexagon=new Array(); Hexagon[0] = new THREE.Mesh( HexagonExtrude[0],material[0] ); Hexagon[1] = new THREE.Mesh( HexagonExtr ...

Unexpected Rotation Issue in Three.js Mesh (Global Rotation vs. Local Rotation)

While working with Three.js, I encountered an issue where the mesh I was trying to rotate using keyboard controls was not behaving as expected. Regardless of the axis I rotated around, the mesh did not rotate in the intended direction. Specifically, when ...

The setting "break-word" within word warp attribute isn't effective for formatting my text

Here is the CSS code that I am using: .SubjectCell{ width: 300px; padding-left: 3em; padding-right: 2em; color: black; font-size: 20px; word-wrap:break-word; } I have applied this class to a table cell within a table in my datalist: <td class ...

Personalizing the share button by changing the icon font to an image

I've been working on incorporating this share button into my website.... Although it functions properly as is, I want to switch out the icon font for an image. I attempted to modify certain CSS properties, but encountered some issues. http://jsfidd ...

The element "Footer" cannot be found in the file path "./components/footer/Footer"

After attempting to run the npm start command, I encountered the following error. In my code, I am trying to import the file /components/footer/Footer.js into the file /src/index.js //ERROR: Failed to compile. In Register.js located in ./src/components/r ...

Dealing with various menu states using Material-UI Menu component: Tips and Tricks

I've encountered an issue with my dynamically generated dropdowns and accordions that appear at the client-side render (based on validated user purchases from the database). The error seems to stem from my menu anchor element not being able to pinpoi ...

Placing a div directly beneath an anchor tag

I'm trying to create a dropdown menu that appears directly under the URL that triggers it. I have successfully made the menu appear, but I am struggling with positioning it correctly. Here is my HTML code: <div id="container"> Content here ...

Encountering a glitch when utilizing framer-motion's Animated Presence feature

I am working on a React slider where new data replaces old data whenever the user clicks on the Next or Previous button. To enhance the slider with beautiful animations, I decided to use framer motion. The animations are almost perfect, but for some reason ...

Passing a variable from a jQuery function to a submitted form: the ultimate guide

I stumbled upon this code snippet online and it's exactly what I needed to learn from as a beginner using jQuery. However, I have a question about transferring or passing the value of counter that was used in the jQuery script within the HTML head tag ...

Discovering the size and count of JavaScript objects within a browser's memory

Many suggest using the Chrome Profiler Heap Snapshot to analyze memory usage, but I have found that on an empty page (no JavaScript or CSS, just HTML), it shows a heap size of 8MB and anywhere from 12 to 30 thousand objects depending on its mood. This tool ...

Exploring the Power of Jasmine Testing with Ternary Conditions

Imagine a scenario where we are working with the following snippet of JavaScript code. object = _.isUndefined(object) ? '' : aDifferentObject.property; Is it possible to write a Jasmine test that covers both scenarios? Do we need to use two se ...

Interactive JQuery calendar

Can anybody assist me with this issue? I am seeing question marks in the graphic and I'm not sure why. I remember encountering these symbols before and I believe it has something to do with charset. Currently, I am using: <meta http-equiv="Content ...