I currently have a td element with the following CSS styling:
td {
border-bottom: 3px solid aqua;
}
I want to be able to click on these cells and change their color, similar to the images linked below:
https://i.sstatic.net/5DscU.png
Is there a way to achieve multi-color borders for these cells?
Thanks!
Building upon the code provided by @king neo, I attempted to use box-shadow: inset and ::before to create a second line that is separate from the border itself. However, my efforts were unsuccessful as the bottom-border got stuck at the corners when it met the border-left and border-right.
The only solution I could come up with was to utilize a background with a gradient. Although this creates a fake border and any elements inside the td cell will appear on top of it. To address this issue, padding can be added, but if padding is only added on selection, the table will jump around. Therefore, padding must also be added on non-selected rows.
In addition, I made use of CSS variables for easy customization of multiple elements in one place.
var prevRow = null;
function toggle(it) {
if (it.className.substring(0, 3) == "sel")
{
it.className = it.className.substring(3, 6);
prevRow = null;
}
else
{
it.className = "sel" + it.className;
if (prevRow != null)
{
prevRow.className = prevRow.className.substring(3, 6);
}
prevRow = it;
}
} :root {
--color-cyan: #00ffff;
--color-yellow: #ffff00;
--border-width: 2px;
}
tr:nth-child(odd) {
background-color: lightblue;
}
tr:nth-child(even) {
background-color: lightgrey;
}
td {
padding: var(--border-width);
}
.selodd > td,
.selevn > td {
--yellow-end-point: var(--border-width);
--cyan-end-point: calc(2 * var(--border-width));
--transparent-starting-point: calc(3 * var(--border-width));
background: linear-gradient(to top,
var(--color-yellow) var(--yellow-end-point),
var(--color-cyan) var(--cyan-end-point),
transparent var(--transparent-starting-point));
background-repeat: no-repeat;
}<table border>
<tr class="odd" onclick="toggle(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="evn" onclick="toggle(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="odd" onclick="toggle(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="evn" onclick="toggle(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="odd" onclick="toggle(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="evn" onclick="toggle(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
</table>try out this code snippet
var currentElement = null;
function toggleClass(element) {
if (element.className.substring(0, 3) == "sel")
{
element.className = element.className.substring(3, 6);
currentElement = null;
}
else
{
element.className = "sel" + element.className;
if (currentElement != null)
{
currentElement.className = currentElement.className.substring(3, 6);
}
currentElement = element;
}
}.odd {
background-color: lightblue;
}
.even {
background-color: lightgrey;
}
.selodd {
background-color: yellow;
}
.seleven {
background-color: yellow;
}<table border>
<tr class="odd" onclick="toggleClass(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="even" onclick="toggleClass(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="odd" onclick="toggleClass(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="even" onclick="toggleClass(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="odd" onclick="toggleClass(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr class="even" onclick="toggleClass(this)">
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
</table>After checking out different strategies for passing data from PHP to Javascript like this and this, I have concerns about the memory and variable size limits in javascript. Currently, I am transferring large chunks of HTML from PHP to Javascript to dynami ...
I am interested in utilizing the data received from an AJAX response in another JavaScript function. Here is the AJAX call located in the view file (sell_report.php): <script src="<?php echo base_url(); ?>public/js/jquery-1.12.4.min.js"> ...
Currently, I am retrieving data in a table from the database and have three buttons - update, delete, and an active/inactive button. Each button has its own functionality, but I need to reload the updated data in the table after any event without refreshin ...
Looking at this instance: HTML / CSS Popup div on text click I am curious about how to have this display on the main page upon initial visit to the website. I prefer it to load automatically without requiring a button click, and once the content is read, ...
My goal is to create a database containing information about the participants of the 2016 New York Marathon (). The website in question heavily relies on javascript and requires manual clicking on each runner's "Expand results" button to view their de ...
I've utilized the :after and :before pseudo-elements to create a border effect when hovering over the navigation links. I've been trying to achieve the same border effect in the :active pseudo-class as well. Can someone please guide me on how to ...
Converting an HTML template to a Vue.js application with Laravel has been quite the task. One particular function that I am struggling with is the drag and drop table feature. src="assets/js/jquery.dataTables.min.js"> src="https://cdnjs.cloudflare.co ...
Whenever I make a GET request to an API using useEffect(), everything works fine when I navigate from the homepage to the page. However, if I refresh the page at http://localhost:3000/coins/coin, I encounter an error message saying "Unhandled Runtime Error ...
I am attempting to take the JSON data provided below and convert it into an array for use with *ngFor='let item of items', which will allow me to display data as item.name, etc... This is what I have tried: var out = []; for(var key1 in object) ...
Is there a more efficient method to compile my sass files with sourcemap enabled other than using the command below? sass --compass --sourcemap --style compact --watch sass:css In the case of utilizing compass, 'compass watch' would be the pref ...
I'm attempting to build a navbar using bootstrap 4: However, I am uncertain of how to achieve this :/, can anyone offer any advice?! I am specifically interested in the lines on the left and right of the navbar, as well as the image centered in the m ...
Currently, I am utilizing HttpClient to make a request for a `json` file. My intention is to have the file cached using `ETag`, however, this feature does not seem to be functioning as expected. Upon investigation, it appears that the absence of sending of ...
Despite my efforts, I have been unable to successfully remove cookies from my API calls in NextJS using Axios as the httpClient. The accumulation of cookies in users' browsers is causing issues and bloating, but I can't seem to find a solution. ...
In order to achieve multiple image upload with preview using React JS, I attempted the code below. However, I encountered an error in the console: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This ...
Encountering an issue while using the forEach function with HTTP requests. The _watchlistElements variable contains the following data: [{"xid":"DP_049908","name":"t10"},{"xid":"DP_928829","name":"t13"},{"xid":"DP_588690","name":"t14"},{"xid":"DP_891890" ...
When you first run the program and click anywhere on the body, it activates the collapse element. I want it to only collapse the accordion on click, not show it immediately. Currently, it will deactivate only after it is hidden once. HTML <!DOCTYPE ht ...
Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help wou ...
I have a div that I want to turn into a link to another page. Typically, we achieve this using link_to link. <% for item in @items %> <%= link_to "Item", item %> # -> or <%= link_to(item) %> <% end %> However, I need the ent ...
<div class="ratio ratio-4x3 justify-content-center align-items-center mx-auto"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100085514265694&tabs=timeline&width=500& ...
This code allows me to create a menu for my gallery. By setting the .masonry # elements to display:none, I can use the corresponding ID in the menu to show the correct gallery when clicked. However, there is a lot of repetitive code in this implementatio ...