What is the best way to emphasize a column starting from the top and going down to the nth row

I'm working on a task to highlight columns and rows in a table from the top to the selected cell and from the left to the selected cell.

Currently, I have achieved highlighting both the whole column and row.

Here is an image of the desired outcome: https://i.sstatic.net/jUFMP.png

I looked for similar cases on the internet but could not find any.

$(document).on('click', "td", function(event) {

  var table = 'table'
  var styleA = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'
  };
  var styleB = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'outline': ' 3px solid #086aa7'
  };

  $(table).find("td,tr").removeAttr('style');
  $(table).find("td").removeAttr('style'); 
  //$(this).parent('tr').css(styleA);
  $(this).parent('tr').find('td').css(styleA);
  $('td:eq(' + this.cellIndex + ')', 'tr').css(styleA); 
  $(this).css(styleB);
});

$(document).mouseup(function(e) {
  var container = $("table");
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $("table").find("tr,td").removeAttr('style');
    $("table").find("td").removeAttr('style');
  }
});
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.0/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>

javascriptjquerycss

Answer №1

If you want to select all previous siblings, you can make use of the prevAll function. Give this a try:

$(document).on('click', "td", function(event) {

  var table = 'table'
  var styleA = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'
  };
  var styleB = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'outline': ' 3px solid #086aa7'
  };

  $(table).find("td,tr").removeAttr('style');
  $(this).prevAll().css(styleA);
  $(this).parent().prevAll().find('td:eq(' + this.cellIndex + ')', 'tr').css(styleA); 
  $(this).css(styleB);
});

$(document).mouseup(function(e) {
  var container = $("table");
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $("table").find("tr,td").removeAttr('style');
  }
});
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.0/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 №2

$(document).on('click', "td", function(event) {
  var table = 'table'
  var styleA = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'
  } ;
  var styleB = {
    '-webkit-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    '-moz-box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
    'box-shadow': 'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)'
  } ;

  $(table).find("td, tr").removeAttr('style') ;
  $(table).find("td").removeAttr('style') ;


  var i = 0 ; /* Position of <td> in <tr> */

  /* Fill all <td> in the same <tr> */
  var tdElem = $(this) ;
  while($(tdElem).length > 0) {
    $(tdElem).css(styleA) ;

    tdElem = $(tdElem).prev("td") ;
    i++ ;
  }

  /* Fill all <td> in prev <tr> */
  var trElem = $(this).parent("tr").prev() ;
  while($(trElem).length > 0) {
    $(trElem).find("td:nth-child(" + i + ")").css(styleB) ;

    trElem = $(trElem).prev("tr") ;
  }
}) ;

$(document).mouseup(function(e) {
  var container = $("table");
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    $("table").find("tr,td").removeAttr('style');
    $("table").find("td").removeAttr('style');
  }
}) ;
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>
  <tr>
    <td>Company</td>
    <td>Contact</td>
    <td>Country</td>
  </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>
  <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 is the inner workings behind Facebook applications?

Let me explain my current situation: I am looking to retrieve a list of emails for the friends associated with a specific user. Here is the step-by-step process I envision: A div box will appear prompting the user to log in using their Facebook creden ...

c#.netasp.netjavascriptfacebook

Having trouble retrieving data using a custom URL in Axios with ReactJs

My knowledge of Reactjs is still new and I am currently working on a project using nextjs. I have a component called Trending.js that successfully fetches data from the URL "https://jsonplaceholder.typicode.com/users". However, when I try to change the U ...

javascriptreactjsaxiosnext.js

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Deconstructing arrays in the req.body object in a Node.js Express application

Received an array in the request body as follows: [ { "month" : "JUL", "year" :"2018" }, { "month" : "JAN", "year" :"2018" }, { "month" : "MAR", "year" :"2018" } ] This array consists of two parameters (month:enum and year:string). ...

javascriptnode.jsexpressswaggerhyperledger

Issue with dropdown list removeClass function

I am encountering an issue with the Jquery dropdown list click function. The addClass method is working properly, but the removeClass method is not functioning as expected. When I click on the dropdown list, it does not hide. Here is a live demo: http://j ...

javascriptjqueryhtmlcss

Responsive SmoothSlider

Need help fixing the responsive breadcrumbs in my slick slider. The slick-content-slider is taking a strange height and I want to ensure that every div remains on the same line. Thank you in advance! $('.slick-content-slider').slick({ slides ...

cssresponsive-designsliderslick.js

What steps can be taken to avoid the destruction of an object following its use of the .load() function in JavaScript (specifically in three.js)?

I'm facing an issue with preventing the destruction of my object after loading it. var loader = new THREE.ColladaLoader(); var rescue; loader.load( 'Improved_Person_Maker_better_quality.dae', function(collada) { scene.add(co ...

javascriptscopethree.js

I'm having trouble getting my website to align in the center of the

Struggling to center my website no matter what I try. I experimented with different CSS properties but haven't had much luck. margin: auto 0; I also attempted the following: margin-left: 50%; margin-right: 50%; The closest I got was aligning every ...

css

Identify when the Vue page changes and execute the appropriate function

Issue with Map Focus Within my application, there are two main tabs - Home and Map. The map functionality is implemented using OpenLayers. When navigating from the Home tab to the Map tab, a specific feature on the map should be focused on. However, if th ...

javascripttypescriptvue.jsionic-frameworkvuejs3

Create an Angular service that outputs class properties as observables

I am trying to accomplish the following task: I have a component with a UserService in it. After a user logs in, I want to call this service to retrieve user data from the backend and store it in a service field. Then, when the main page is reloaded, I wan ...

javascriptangularrest

The server-side function is unresponsive with a 404 error message, indicating it cannot

I am facing an issue with my server-side code. I have a class named Server located inside the Models folder in my project directory (solution -> project -> Models -> Server.cs). When I click on a button, I want to call a method from the server an ...

c#jqueryajax

Modifying the color of elements within a picture

I am in search of the perfect web technology or JavaScript library that can help me achieve a specific functionality. My aim is to change the colors of particular objects within an image. I am looking to create a tool where users can select a color, and th ...

javascriptphpjqueryhtml

Dynamic HTML element

I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...

javascripthtmljqueryajaxdynamic

The issue of double submission persists, with the prevention of the default action

I'm in need of assistance. Within my form, I have two buttons displayed on the page: "Save" and "Publish". Below is the corresponding HTML code: <button type="submit" class="button">Save</button> <button type="button" class="button" n ...

javascriptjqueryhtml

What is the best way to identify and list distinct values within a MongoDB collection when the values are arrays of objects?

Is there a way to extract unique values from a collection that consists of an array of objects? While the distinct method works for strings and numbers, I'm facing a situation where the values are objects. Here's a simplified version of the mode ...

javascriptnode.jsmongodbexpressmongoose

Looping through an array of nested objects using Vue

I have encountered a challenge with accessing specific data within an array that I am iterating over. The array is structured as follows, using Vue.js: companies: [ name: "company1" id: 1 type: "finance" additionalData: "{& ...

javascripttypescriptvue.jsobjectv-for

Troubleshooting issue with CSS SVG Clip path functionality - facing technical difficulties

Having an issue with a clip path in my CSS. When I apply the clip path to my CSS fill, the image isn't showing up... I'm using Chrome. Any ideas on how to fix this? I found this helpful generator https://example.com .card .content .picture img { ...

cssgoogle-chromeclip-path

Steps for refreshing a React component following a data fetch operation

Currently, I am in the process of learning how to use React for building web applications. I have a basic React app that demonstrates the following features: Fetching a list of users Displaying the names of the users on individual cards once they are fetc ...

javascriptreactjsfetch-api

Does the reduce method work by default like this?

const product_list=[{id:1},{id:2}] const temp_products=[{id:1,quantity:10},{id:2,quantity:20}] product_list.map(prod=>{ console.log(temp_products.reduce((init,curr_prod)=>{ return curr_prod.id == prod.id ? curr_prod.quantity : null })) ...

javascriptarraysobject

the scrollbars are appearing on the window instead of within my div container

I'm having trouble getting a scrollbar on my div element when the content is too wide. Instead, the scrollbar always appears on the window itself. I have tried adjusting the overflow settings but can't seem to find the right solution. jsFiddle ...

htmlcssresizescrollbaroverflow