What is the best way to display a book cover and position it in a specific location?

There is a dynamically populated HTML table using AJAX: (shown in the image below)

If I click on any cell in the table, except for headers c1 through c4, I want to display a cover hiding the cells to the left of the clicked cell: (as shown in the image below which I created manually in Paint)

In this example, I clicked on a cell in column c3. How can I implement this cover feature?

jqueryhtmlcss

Answer №1

$(document).ready(function() {

    $('table tr td').on('click', function() {
        $('table tr td').removeClass('selected');
        var _index = $(this).index();
        $('table tr').each(function(index) {
            if (index > 0) { // excluding the header
                $(this).find('td').each(function() {
                    if ($(this).index() < _index) {
                        $(this).addClass('selected');
                    }
                });
            }
        });
    });

});

Is this similar to what you are looking for?

$(document).ready(function(){

$('table tr td').on('click', function(){
$('table tr td').removeClass('selected');
var _index = $(this).index();
$('table tr').each(function(index){
if (index>0) { // excluding the header
$(this).find('td').each(function(){
if ($(this).index() < _index) {
$(this).addClass('selected');
}
});
}
});
});

});
td {
border: solid 1px #000;
}

td.selected {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
</table>

Answer №2

Modified following a suggestion

To simplify the process, add a specific class to the table itself along with an index value. Then, you can easily apply CSS rules to style the elements without the need for excessive looping.

By doing this, you can utilize a pseudo-element to cover each cell, as shown below:

$(document).ready(function() {
  $('table').on('click', function(e) {
    $(this).attr('class', 'idx' + $(e.target.parentElement).children().index(e.target));
  });
});
td {
  position: relative;
  border: 1px solid gray;
}

table.idx0 td:nth-child(-n+0)::after,
table.idx1 td:nth-child(-n+1)::after,
table.idx2 td:nth-child(-n+2)::after,
table.idx3 td:nth-child(-n+3)::after,
table.idx4 td:nth-child(-n+4)::after,
table.idx5 td:nth-child(-n+5)::after {
  content: '';
  position: absolute;
  left: -2px;                              /* 2px to make up for border/padding */
  top: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>c1</th>
    <th>c2</th>
    <th>c3</th>
    <th>c4</th>
    <th>c5</th>
    <th>c6</th>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
</table>

Alternatively, you can simply set both text color and background color to be the same:

$(document).ready(function() {
  $('table').on('click', function(e) {
    $(this).attr('class', 'idx' + $(e.target.parentElement).children().index(e.target));
  });
});
td {
  border: 1px solid gray;
}

table.idx0 td:nth-child(-n+0),
table.idx1 td:nth-child(-n+1),
table.idx2 td:nth-child(-n+2),
table.idx3 td:nth-child(-n+3),
table.idx4 td:nth-child(-n+4),
table.idx5 td:nth-child(-n+5) {
  background: black;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>c1</th>
    <th>c2</th>
    <th>c3</th>
    <th>c4</th>
    <th>c5</th>
    <th>c6</th>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</td>
  </tr>
  <tr>
    <td>d1</td>
    <td>d2</td>
    <td>d3</td>
    <td>d4</td>
    <td>d5</td>
    <td>d6</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

Designing personalized visual elements that can be colored using HTML and CSS

I have a custom graphic that needs to be filled with three different colors. Each color will fill from 1% to 100%. For example, the blue color should fill from the legs to the head (1-100%), the red color should fill from the bottom of the head to the to ...

csscanvassvgcss-animationscss-shapes

Is the container in semantic ui being breached by a segment overflow?

I've recently started learning Semantic UI. One issue I'm facing is that the width of the "segment" overflows the "container." Check this JSFiddle for more clarity. Are there any alternative solutions? In addition to the grid system, I'm ...

htmlcssuser-interfacesemantic-uisegment

What could be preventing my state from changing to false when I click the close button on the menu?

Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected. The component: import CloseButton from "./CloseButto ...

csstypescriptnext.jstailwind-csscss-animations

I am interested in implementing a variable to define rows within a <tr> element in an HTML table

I am facing an issue with finding specific rows in a table by using a variable like /tr[i]/ where i represents the row I want to access. When I hardcode the element in my code, it works perfectly: driver.find_element_by_xpath("//tbody[@class='sample& ...

pythonhtmlselenium

How can we make it simple for users to update webpage content using a file from their computer?

I am developing a custom application specifically for use on Firefox 3.6.3 in our internal network. My goal is to dynamically update the content of the page based on a file stored locally on my computer. What would be the most straightforward approach to ...

javascriptjqueryfilefile-upload

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

Hey there, I'm a newbie on stackoverflow so feel free to correct me if I'm off base ;) Here's my current dilemma: I have a text.php file that contains 2 <select> elements. The first one allows me to choose a table (like "accounts", "c ...

javascriptphphtmlmysqlajax

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...

htmlangulartypescriptangular-ivy

"Utilizing the power of ng-click to target specific child

I am facing an issue with my owl carousel where events are not firing on cloned items. In search of a solution, I came across a suggestion from Stack Overflow to move the event handler from the direct target to its parent element: Original code snippet: ...

javascriptjqueryangularjs

What is the method for accessing a JQuery mapping array in PHP?

I am attempting to transfer data from JQuery to PHP and then save it in the database. Here is my JQuery code snippet: var map = $.map(customFieldIds, function(value) { return { name: value, value: customFieldValues[value] ...

phpjqueryarraysajaxmapping

Choosing a specific category to display in a list format with a load more button for easier navigation

Things were supposed to be straightforward, but unexpected behaviors are popping up all over the place! I have a structured list like this XHTML <ul class = "query-list"> <li class="query"> something </li> <li class="query" ...

javascriptjquerycssmeteor

Is there a way to always keep an element positioned directly above a fluid image that is perfectly centered?

My current project involves creating an overlay to display a fluid image of any size. The challenge I'm facing is how to consistently position the close button 30px above the image and flush with its right edge. The catch is that the container doesn&a ...

javascriptjqueryhtmlcss

Incorporating a YouTube video

Having trouble integrating a YouTube video that won't play automatically on your website? The video is visible, but just doesn't start playing on its own. What could be causing this issue? Appreciate any help you can provide! ...

cssyoutube

There are times when the `window.location.replace` function does not

I have implemented a Bootstrap Dropdown feature that allows users to select a language for site translation, append the URL with the selected language, and then reload the page. Initially, it works well for the first set of translations like en|es. Howeve ...

javascriptjquery

AngularJS routing that is tailored to form input

I am trying to create a dynamic html page where the user can input form variables. My goal is to use AngularJS routing to navigate to different URLs based on the form inputs. Does anyone have advice or guidance on how I can achieve this functionality? ...

htmlangularjsroutesurl-routing

simple steps to retrieve elements from an xml or string

I have integrated a third-party API and it is returning the following XML data: <?xml version=\"1.0\" encoding=\"ISO-8859-1\"?> \u000a <errorNotification> \u000a\u0009 <message>invalid company code<& ...

jquery

The flashing of Bootstrap tabs can be seen on various pages

Currently, I am encountering an issue with bootstrap tabs on my website. There seems to be a blinking problem with the tabs on certain pages. Check out this video showcasing the blinking tab in the search result page: Watch Here Interestingly, the same ta ...

jqueryhtmlcsstwitter-bootstrap

The content is overflowing outside the boundaries of the div, yet there is no

I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...

javascriptjqueryhtmlcss

Updating the content on your website is similar to how Facebook updates their news feed. By regularly

I am currently working on developing a webpage that can automatically update data by utilizing an ajax method. The challenge I'm facing is that the ajax method needs to be called by the user, and there isn't a continuous process in place to monit ...

phpjqueryajax

What is the best way to interpret a line break within a string variable in TypeScript?

Realtime Data base contains data with \n to indicate a new paragraph. However, when this data is retrieved and stored in a String variable, the website fails to interpret the \n as a paragraph break: https://i.stack.imgur.com/tKcjf.png This is ...

htmlreactjstypescript

CSS and HTML modal not closing

I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...

jqueryhtmlcss