I have some table like this
<tbody>
<tr class="column" id="1-row">
<td>
<span id="1">1</span>
(link)
</td>
<td>id</td>
<td>username</td>
<td>sometext</td>
</tr>
<tr class="column" id="2-row">
<td>
<span id="2">2</span>
(link)
</td>
<td>name</td>
<td>username</td>
<td>sometext</td>
</tr>
</tbody>
I need to add border with style outline: 'thick solid black', for example, to first row when I jumping to page by clicking http://www.thiswebpage/#1
Use the css :target selector
a {
color:black
}
* {
text-align: center;
}
div#myTarget:target, div#myOtherTarget:target {
color: red;
}
Click to target #myTarget<br>
Click to target #myOtherTarget
<br><br>
<div id="myTarget">#myTarget</div>
<div id="myOtherTarget">#myOtherTarget</div>
Related
I have implemented my version of this example (using Vapor Swift & Leaf) and it works fine: Simple example of collapsible rows in HTML/CSS/JS
However, I want all of the collapsible rows to start off hidden by default. I don't know JS very well but I don't think modifying this would help:
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
Do I need to make a different JS script and if so how will it find the correct rows to hide (and how to hide them)?
Since you are using the jQuery library, you can use a jQuery selector to select the elements you want to hide, and hide them on document load:
It looks like the rows that you want to toggle between hidden/shown all have the .hide class. So you can use that as the selector:
$('.hide').toggle(); // hide rows initially
Run the snippet below to see how this works. Initially, the rows are hidden. If you click "Accounting" or "Management" the rows will expand.
$(document).ready(function() {
$('.hide').toggle(); // hide rows initially
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
table {
width: 750px;
border-collapse: collapse;
margin: 50px auto;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td,
th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Regian</th>
<th>Q1 2010</th>
<th>Q2 2010</th>
<th>Q3 2010</th>
<th>Q4 2010</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="accounting">Accounting</label>
<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="management">Management</label>
<input type="checkbox" name="management" id="management" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Europe</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Middle East</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</tbody>
</table>
I have multiple tables that hold images throughout my document. Each table has 3 rows (Caption/Image/Source). I need to style my caption to have a border using CSS, but when the caption is blank, the caption class still appears in my markup, resulting in a random border appearing.
Table with caption:
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
Table with no caption, with the class="caption" still in the table cell:
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="img"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I want to remove the caption class for cells that are empty, but my current JS removes the class for all my elements:
//remove empty caption
if ($('.caption').is(':empty')){
$("td").removeClass( ".caption" );
}
How can I update this so it only removes the class for empty .caption cells
JS Fiddle: https://jsfiddle.net/5dq63zL4/
very easy
td.caption:empty{
border:none
}
Instead of removing the class with JS, you can use the CSS pseudo-class :empty with :not, to style only non empty captions:
table {
margin: 20px 0
}
.caption:not(:empty) {
border-bottom: 1px solid red;
}
.source {
font-size: .85em;
color: #777
}
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I am trying to add a blinking effect to my table when a button is pressed. My code kind of achieves this by making the whole table blink however it makes the data in the cells without an existing css hard to read. Therefore, I am trying to figure out if it is possible to make the just the border of each cell have the blinking effect instead of the whole cell so that the data is still easily readable as seen in the status row. Is this possible without having to add a css to every single cell?
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
To achieve this you first need to put borders on the th and td elements. Then you can amend the .blink selector to amend the colours of the border, instead of the background, like this:
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
table {
border-collapse: collapse;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #FFF;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink th,
.blink td {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
border-color: white;
}
to {
border-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
I am working with a MVC view that has a 3 columns table. The table displays a list of Products. Column #1 (product name) contains links to a product specific page. When a user clicks on the links, I want to expand and display the product description and at the end of the product description, I want to include a link that takes the user to the product page. If a user clicks on the link again, I want to collapse it back. I have a model that represents the product and the product description is stored in its own field.
The table is built and populated as below. Any insight on how to achieve the expand/collapse via jQuery is very much appreciated.
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
foreach (product p in model.products)
{
<tr>
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
}
</tbody>
</table>
The easiest way to to utilize product IDs as well. Add the specific product ID as a data attribute, then using jQuery, pull that attribute and reuse it to target rows containing the descriptions.
$('.productname').on('click', function() {
var id= $(this).attr('data-id');
$(this).toggleClass('active');
$('.data' + id).slideToggle(500);
});
.hide {display: none; }
/* -- below is just to "pretty up" the snippet ------ */
table {
width: 100%;
background: #eee;
border-collapse: collapse;
border: 1px solid #aaa;}
th { background: #cef; color: #4cf; text-transform: uppercase; font-size: 0.8em; padding: 3px;border: 1px solid #aaa;}
td { font-size: 1.1em; padding: 5px 10px; border: 1px solid #aaa; border-bottom: none; }
tr.collapsed td { padding: 0; border: none; }
.productname:hover, .active { background: #eff; }
.productdesc { padding: 5px 10px; background: #eff; border-top: 1px solid #aaa; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!--
foreach (product p in model.products)
{
-->
<tr class="productname" data-id="prodID00">
<!-- Change data-id="prodID00" to data-id="#p.productID" -->
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID00">
<!-- Change class="hide productdesc dataprodID00" to class="hide productdesc data#p.productID" -->
<p>#p.productDescription #p.productLink</p></div>
</td>
</tr>
<!-- } -->
<!-- below are just manual iterations of the row above -->
<tr class="productname" data-id="prodID01">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID01">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID02">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID02">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID03">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID03">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID04">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID04">
<p>product description and link</p></div>
</td>
</tr>
</tbody>
</table>
Note where the prodID is located in the rows.....
I removed the foreach function and brackets because it's invalid HTML. But if they are there and dynamically generate the HTML it'll work fine. The rows I used are just manual iterations opposed to dynamic iterations.
I have tried searching, but I am stuck.
Basically I am making a jeopardy game board; which I created using a table. I would like to change the background-color of the td after it has been clicked on. The challenge I am facing is that (1) I am using a link to direct to the question/answer (yes, I know this could be done other ways, but I need to learn more to advance and I am working on that); (2) After searching for answers, I can't seem to get it to work with the code I have.
Here is my [JSFiddle]https://jsfiddle.net/hLyauL5a/)
Html:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff </th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
</tr>
</tbody>
</table>
CSS:
jQuery code:
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
I would appreciate any help!
I see two problems. One, you have not included jquery or your javascript file in your html. Your jsfiddle does not have jquery loaded.
Two, assuming the above was just a problem getting your question across on Stack Overflow, you haven't waited for the document to load before attaching event listeners. The selector tries to select something that isn't there yet, and nothing is attached. What you need is:
$(document).on('ready', function(){
$("table tr td").click(function(e) {
$(this).css("background", "#626975");
});
});
Working example:
$(()=> {
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
});
body {
cursor: pointer;
}
/*gameboard*/
table {
width: 100%;
border-collapse: collapse;
}
tr {
background: #1f293a;
color: #47ba04;
}
th {
background: #1f293a;
color: white;
font-weight: bold;
min-width: 200px;
}
td {
color: #47ba04;
background: #1f293a;
min-width: 100px;
height: 130px;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: center;
}
a {
color: #47ba04;
text-decoration: none;
}
/* For the question pages*/
#question,
#answers {
width: 100%;
height: 800px;
border: 1px solid black;
background-color: #1f293a;
color: white;
font-weight: bold;
}
div.question h2,
div.answers h2 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
</tr>
<tr>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
</tr>
<tr>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
</tr>
<tr>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
</tr>
<tr>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
</tr>
</tbody>
</table>
You could launch the links in a new window by adding target="_blank" attribute to your anchor tags:
<td>100</td>
$('a').click(function(e){
e.preventDefault();
$(this).parent().css('background-color','blue');
});
So,using JQuery, if you click on an tag, don't jump on whatever link it is, you prevent the default event, then you get its parent which is the element and you add the css style as shown. Here is the html that I used as an example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td >Table</td>
<td bgcolor="#00FF00">$100</td>
</tr>
Generally, a hyperlinks like <a herf="" onclick="">contain two events: onclick and herf. The order of execution --- 'onclick' in front of 'herf'. so making onclick method return 'false' if you want to page can't jump on whatever link it is when you click hyperlink. Code is as follows.
$(function(){
$("a").on("click",function(){
$(this).css("background", "#626975");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>