There is a dynamically populated HTML table using AJAX: (shown in the image below)
https://i.sstatic.net/ig9Nv.png
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)
https://i.sstatic.net/ZyfDr.png
In this example, I clicked on a cell in column c3. How can I implement this cover feature?
$(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>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>My goal is to dynamically load pages into a specific div using ajax. Here's my HTML code: <ul id="nav" class="nav" style="font-size:12px;"> <li><a href="#" id="m_blink">Tab1</a></li> <li><a href="#" id= ...
Lately, I've been struggling with integrating Stripe into my platform. One of the major issues I'm facing is setting up a subscription using AJAX, which I haven't quite cracked yet. On top of that, I need to ensure the credit card informatio ...
After successfully implementing a jQuery script for my custom dropdown menu on a standalone webpage, I encountered issues when integrating it into my Rails application. I am unsure if the problem is related to Turbolinks or if there is another underlying c ...
I am working on an Angular 1.x application (using ES5) where I need to display formatted CSS and JS code for the user to copy and paste into their own HTML file. The code should include proper indentations, line-breaks, etc. Here is a sample of the code: ...
Is there a clever CSS technique that allows a div to extend all the way to the bottom of the screen without displaying any visible content inside? Or am I better off using JavaScript for this purpose? Thank you, Richard ...
I am currently working on developing a feature that saves high scores using local storage. The project I'm working on is a quiz application which displays the top 5 scores at the end, regardless of whether the quiz was completed or not. However, I&apo ...
Yesterday, I posted about my email newsletter and received some helpful feedback on creating a good structure. I implemented the suggestions provided into my newsletter and also added media query code to make layout adjustments for supported email clients. ...
I'm a beginner in web development and currently practicing HTML, CSS, and Javascript. I've added a button to my html file and would like the color of the button to change when it's clicked on. Here is my HTML code: <button id="box&q ...
Currently, I am working with a gridview that includes a checkbox field. My goal is to use jQuery to create a function that activates when an unchecked checkbox is checked. function clickAllSize() { alert("helloy"); } $(document).ready(function () { ...
I've been working on incorporating a jQuery Exit LightBox into my website and came across this straightforward tutorial - The concept of the pop-up is quite clever, but I've run into an issue where it only functions properly when a visitor is at ...
I am currently facing a challenge in creating a filter on a web page using Bootstrap's drop-down menu. The issue lies in placing the filters in columns side by side, as they are stacking up instead. The filter menu is generated dynamically by looping ...
Currently, I am facing a situation where I need to ensure that the CSS and JS files are loaded only on specific views in Laravel 5.2. Due to my boss's decision to eliminate RequireJS for loading JS files on our blade templates, we are now exploring a ...
Attempting to send form data via jQuery and Ajax to a PHP web service (php file) for echoing the results. This is my index.html file <html> <head> <title>PHP web service & AJAX</title> <link rel="stylesheet" type="text/ ...
*I am facing an issue where the default bootstrap navbar style appears before my custom styles get applied every time I reload the page. Any assistance would be greatly appreciated* - Whenever I reload the page, the default bootstrap navbar style appears ...
I'm facing an issue with the HTTP GET method when trying to retrieve JSON data. Although the HTTP GET method is successfully fetching the JSON data, I'm struggling to connect it with the object literal. For better clarity, here's the specif ...
Currently, I am facing some issues with the JQuery plugin 'videoBG'. The problem is that when I view the video offline, it works perfectly in all browsers. However, once I go online, the video stops working in FireFox and IE. It seems like the sc ...
Currently, I am pondering the optimal method for gathering information from my Contact page. I have already created a form; however, I'm unsure how to send the gathered data to myself since I am relatively new to Web development. Angular is the framew ...
Here is the CSS code to be used: #onec-fourth:hover { background-color: #F36DE1; color: white; } I am looking to keep the background color and text color effects for 1 second after I move my mouse off the object (#onec-fourth). Currently, when I mov ...
Hey there, I've encountered a problem and was wondering if you could assist me with it. In the code snippet provided below, you'll see that there are elements with: transform: translate(0,0); Within these elements, there is a "dropdown" elemen ...
I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...