JavaScript table - javascript

I need help with this question:
I have created the table but I don't know how to use the event inside it
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
Thank you in advance.


You got the idea...
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
const hobies = document.querySelector('[hobies]')
const hoby_image = document.querySelector('[hoby-image]')
var hoby_images = {
'Skating': 'https://picsum.photos/id/237/200/300',
'Swimming': 'https://picsum.photos/id/238/200/300',
'Cooking': 'https://picsum.photos/id/239/200/300'
}
for(let i = 0; i < hobies.childElementCount; i++){
hobies.children[i].addEventListener('mouseover', ()=>{
hoby_image.children[0].src = `${Object.entries(hoby_images)[i][1]}`
})
}
td{
cursor:pointer;
}
td:hover{
border:red;
}
div {
text-align: center;
}
table {
border-collapse: collapse;
}
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr hobies>
<td style="width: 105.6875px;">Skating</td>
<td style="width: 110.3125px;">Swimming</td>
<td style="width: 130px;">Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td hoby-image style="width: 90px;" colspan="9">
<img src='https://picsum.photos/id/237/200/300'></img>
</td>
</tr>
</tbody>
</table>
<br>


First, for each td tag you want to have the "mouseover" event, you need to add the event handler.
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
For the style just use this
<style>
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
</style>
Then at the second row change p tag with an img tag
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
At the bottom add this script
<script>
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
</script>
Base on which td tag is hovering, you can set the src and alt attribute of img tag with parameter.
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
<table style="width: 337px; margin-left: auto; margin-right: auto" border="1">
<tbody>
<tr>
<td style="width: 90px" colspan="9">
<table style="width: 329px" border="1">
<tbody>
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center">
<td style="width: 90px" colspan="9">
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
</td>
</tr>
</tbody>
</table>
<br />


Rather than use tables to do the layout (1992 called and wants a word with you) I've re-written using divs, but the concepts are exactly the same.
Attach the event handler .addEventListener for the mouseover event — you would attach it to your <td...> elements instead of my <li> elements.
I have attached which image to use to the element being hovered using a data- attribute, so the handler just gets that value and doesn't have to figure out which of the items is being hovered.
const imageHolder = document.querySelector('#imageholder img');
const hobbies = document.querySelectorAll('#hobbies li');
hobbies.forEach(el =>
el.addEventListener('mouseenter', function(e) {
const hobbyImage = e.target.dataset.image;
imageHolder.src = `https://picsum.photos${hobbyImage}`;
})
);
#app {
width: 80%;
}
#imageholder {
width: 90%;
margin: 0 auto;
}
ul#hobbies {
list-style-type: none;
}
ul li {
display: inline-block;
width: 30%;
text-align: center;
}
li + li {
border-left: 1px solid green;
}
<div id="app">
<ul id="hobbies">
<li data-image="/300/200">Skating</li>
<li data-image="/300/201">Swimming</li>
<li data-image="/300/202">Cooking</li>
</ul>
<div id="imageholder">
<img src="https://picsum.photos/300/200">
</div>
</div>

Related

Display column using div dynamically having first column fixed and rest of all with horizontal scrollbar

I need your help.
I am creating an N-level nested table with dynamic columns
So what I want to do is, I want to create a table having a variable number of columns based on user selection for that I have created a simple drop-down box, according to drop-down selection, those selected columns will appear in the table
What I want is my first column of the table should be always fixed and while others can be scroll-able horizontally, and the width of those columns should be adjusted as column displays or hides
I don't want to use any external libraries. I have created a custom table based on div along with grid CSS
Below are screenshots of things that I have done till now
Here is code for reference:
HTML:
<ng-container *ngFor="let rData of reportData; let i = index; last as isLast" >
<div class="myTr report-row">
<div class="myTd">
<button
class="btn report-btn-sm"
*ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == true"
(click)="splitData(rowWiseFilterObj(rData,this.splitOpt[0].id),this.splitOpt[0].id,sFilters,splitOpt,i,rData,selectedDate)"
row="rData">+</button>
<button
class="btn report-btn-sm"
*ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == false"
(click)="removeDynamicComponent(rData,i)"
>-</button>
<span *ngIf="this.splitOpt[0].id == 'campid'">{{rData['campaign_name']}}</span>
<span *ngIf="this.splitOpt[0].id !== '__time' && this.splitOpt[0].id !== 'campid'">{{rData[this.splitOpt[0].id]}}</span>
<span *ngIf="this.splitOpt[0].id === '__time'">{{ rData[this.splitOpt[0].id] | date:'dd-MM-yyyy HH:mm:ss Z'}}</span>
</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">{{convertToDecimals(rData.impressions,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.conversions,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.bids,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.wins,2)}}</div>
<div class="myTd">$ {{convertToDecimals(rData.spend,2)}}</div>
<div class="myTd">
<button class="btn btn-secondary m-btn m-btn--label-danger m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" *ngIf="this.splitOpt[0].id=='campid'" (click)="excludeReport(rowWiseFilterObj(rData,this.splitOpt[0].id))"> <i class="la la-close"></i> </button>
<button class="btn btn-secondary m-btn m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" disabled="disabled" *ngIf="this.splitOpt[0].id!='campid'"> <i class="la la-ban"></i> </button>
</div>
</div></div>
</div>
<div *ngIf="isLast" class="text-right col-12">{{altrows("#ffffff","#f5f5f5")}}
<a href="javascript:void(0)" class="m-link" (click)="loadmore()" style=" margin: 10px -30px 15px 10px;
background: #5ccdde;
color: #fff;
padding: 2px 10px;
font-size: 12px;" *ngIf="reportData.length > 19"> Load more </a>
</div>
<ng-template #dynamic ></ng-template>
</ng-container>
<div class="myTr" style="margin-top:20px;">
<div class="myTd"></div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd"></div>
</div></div>
</div>
</div>
JS:
getReport() {
this.hidePopup();
if(this.splitOpt.length === 0) {
// this.updateGraph(this.currentGraphSelection);
return false;
}
var apiFilters: any = [{}];
for (var i = 0; i < this.sFilters.length; i++) {
if (this.sFilters[i].values.length > 0) {
var k;
k = this.sFilters[i].id
apiFilters[0][k] = this.sFilters[i].values
}
}
var split = this.splitOpt[0].id;
this.reportData=[];
this.reportLoading = true;
this._apis.getReportData(split, apiFilters[0],this.selectedDate,1,20).subscribe(response => {
if (response.status == 1200) {
this.reportData = response.data.split_by_data;
this.reportData.map(function(obj) {
obj.isCollapsed = true;
return obj;
});
this.totalImpressions=response.data.totalCount[0].impressions;
this.totalConversions=response.data.totalCount[0].conversions;
this.totalBids=response.data.totalCount[0].bids;
this.totalWins=response.data.totalCount[0].wins;
this.totalSpend=response.data.totalCount[0].spend;
this.reportLoading = false;
var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
this.cd.detectChanges();
}
});
}

You can remake the table using <div>s with flex layout.
I write a full example below. You don't have all flexibility of a table, however it's quite powerful. You can also fix the columns scroller to the page, and make it ever visible, even with a table bigger than the page height. And more...
You'll see, i make the scrollable columns all with the same width. You can set different widths. I would do this using classes for columns.
I believe the code is easy to understand. If you need a help, or want to use more of the power of flex layout, you can see this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The javascript to make all move together is the most simple thing here. The idea is to get the scroll event and apply the same scroll tho the lines with overflow: hidden.
To create new columns, is as simple as create it on a <table>, just crate <div>s into .myTdGroup elements.
<style>
.myTable {
font-family: sans-serif;
font-size: 15px;
width: 450px;
border: 2px solid #BBB;
position: relative;
}
.myTr {
display: flex;
align-items: center;
}
.myTr:nth-child(odd) { background: #DDD }
.myTdGroupBox {
overflow: hidden;
}
.myTdGroup {
display: flex;
align-items: center;
width: 500px;
}
.myTr:last-child { background: #777 }
.myTr:last-child .myTdGroupBox { overflow-x: scroll }
.myTr:last-child .myTd { padding: .1px 0 0 0 }
.myTd {
margin: 0 1em;
padding: .5em 0;
flex-grow: 1;
flex-basis: 50px;
overflow-x: auto;
white-space: nowrap;
}
.myTr > .myTd { flex-basis: 150px; }
</style>
<div class="myTable">
<div class="myTr">
<div class="myTd">Line A</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">A1</div>
<div class="myTd">A222</div>
<div class="myTd">A333</div>
<div class="myTd">A444</div>
<div class="myTd">A555</div>
<div class="myTd">A666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd">Line BBBBB</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">B111</div>
<div class="myTd">B2</div>
<div class="myTd">B333</div>
<div class="myTd">BX<br>444</div>
<div class="myTd">B555</div>
<div class="myTd">B666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd">Line<br>CCC<br>CCC</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">C111</div>
<div class="myTd">C222</div>
<div class="myTd">C3</div>
<div class="myTd">C 444 444 444 end</div>
<div class="myTd">C555</div>
<div class="myTd">C666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd">Line DDD</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">D111</div>
<div class="myTd">D222</div>
<div class="myTd">D333</div>
<div class="myTd">D444</div>
<div class="myTd">D555</div>
<div class="myTd">D666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd"></div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd"></div>
</div></div>
</div>
</div>
<script>
var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
</script>

Janak Prajapati, Earlier I have done something similar to fixed table.
https://jsfiddle.net/Sampath_Madhuranga/2o4h6u3f/10/
.tg {
border-collapse:collapse;
border-spacing:0;
border-color:#ccc;
}
.tg td{
font-family:Arial, sans-serif;
font-size:14px;
padding:9px 20px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:#ccc;
color:#333;
background-color:#fff;
}
.tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:9px 20px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:#ccc;
color:#333;
background-color:#f0f0f0;
}
.tg .tg-29qf{
font-weight:bold;
background-color:#f0f0f0;
border-color:inherit;
text-align:left
}
.tg .tg-xldj{
border-color:inherit;
text-align:left
}
.tg .sticky-col-1{
left: 0;
position: absolute;
top: auto;
width: 120px;
}
.tg .sticky-col-2{
left: 160px;
position: absolute;
top: auto;
width: 70px;
}
.zui-scroller {
margin-left: 295px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 900px;
}
.tg .tg-kiyi{
font-weight:bold;
border-color:inherit;
text-align:left;
min-width:100px;
}
.tg .cover-head-cell{
min-width:300px;
text-align:center;
}
.tg .tg-29qf{
font-weight:bold;
background-color:#f0f0f0;
border-color:inherit;
text-align:left;
min-width:100px;
}
.tg .tg-xldj{
border-color:inherit;
text-align:left;
min-width:100px;
}
.tg .tg-dvid{
font-weight:bold;
background-color:#efefef;
border-color:inherit;
text-align:left;
vertical-align:top;
min-width:100px;
}
#media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
<div class="tg-wrap">
<div class="zui-scroller">
<table class="tg">
<thead>
<tr>
<th class="tg-kiyi sticky-col-1" rowspan="2">Title 1</th>
<th class="tg-kiyi sticky-col-2" rowspan="2">Title 2</th>
<th class="tg-kiyi cover-head-cell" colspan="3">Title 3</th>
<th class="tg-kiyi" rowspan="2">Title 4</th>
<th class="tg-kiyi cover-head-cell" colspan="3">Title 5</th>
<th class="tg-kiyi" rowspan="2">Title 6</th>
<th class="tg-kiyi cover-head-cell" colspan="3">Title 7</th>
<th class="tg-kiyi" rowspan="2">Title 8</th>
</tr>
<tr>
<th class="tg-kiyi sticky-col-1" rowspan="2">Subtitle 1</th>
<th class="tg-kiyi sticky-col-2" rowspan="2">Subtitle 2</th>
<th class="tg-29qf">Subtitle 3</th>
<th class="tg-29qf">Subtitle 4</th>
<th class="tg-29qf">Subtitle 5</th>
<th class="tg-29qf">Subtitle 6</th>
<th class="tg-29qf">Subtitle 7</th>
<th class="tg-29qf">Subtitle 8</th>
<th class="tg-29qf">Subtitle 9</th>
<th class="tg-29qf">Subtitle 10</th>
<th class="tg-29qf">Subtitle 11</th>
</tr>
</thead>
<tr>
<td class="tg-xldj sticky-col-1">sdz</td>
<td class="tg-xldj sticky-col-2">saz</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">sa</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
</tr>
<tr>
<td class="tg-xldj sticky-col-1">as</td>
<td class="tg-xldj sticky-col-2">sa</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">sa</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">sa</td>
</tr>
<tr>
<td class="tg-dvid sticky-col-1">Total</td>
<td class="tg-dvid sticky-col-2">23</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">dd</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">dd</td>
<td class="tg-dvid">sd</td>
</tr>
</table>
</div>
</div>
Please try this and let me know your idea.
Thanks.

Remove parent div class if child div has a specific value

I have the following code:
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
Check button value if it is 16 then remove the .CalendarDay--valid from the parent div.
How do I do this?

You can use closest() method to do that:
var elem = $('.CalendarDay__button');
if (elem.text().trim() === '16') {
elem.closest('.CalendarDay--valid').removeClass('CalendarDay--valid');
}
.CalendarDay--valid button{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
</tr>
</table>

Use parent with this for particular td. I give two td 16 -- 17 on example.17 is shown but 16 remove.
$('.CalendarDay').find('.CalendarDay__button').each(function() {
if ($(this).text() == '16')
$(this).parent('td').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">17</button>
</td>
</tr>
</table>

Try this if you have multiple buttons to check:
$.each($('.CalendarDay__button'),function(){
var btn = $(this);
var parent = btn.closest('.CalendarDay');
// Before
console.log(parent.attr('class'))
if(btn.text() == "16"){
parent.removeClass('CalendarDay--valid');
// After
console.log(parent.attr('class'))
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
</tr>
</table>

How to overwrite a CSS class at the press of a button and remove it with another button?

I and trying to apply a blinking effect css class to the whole table when someone presses the button. However, some rows are not being affected by the blink class.
$("#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;
}
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"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

All the elements that have their own background-color style won't inherit the style from the container. You need to put the class on those elements.
$("#alarm").click(function() {
$("#tableContainer td, #tableContainer th").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer td, #tableContainer th").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"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

Check This
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#status").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#status").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"></div>
</td>
<td>
<div id="p11"></div>
</td>
<td>
<div id="c1"></div>
</td>
<td>
<div id="ca1"></div>
</td>
<td>
<div id="m1"></div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr id="status" class="status">
<td class="row">Status</td>
<td>
<div id="p2"></div>
</td>
<td>
<div id="p21"></div>
</td>
<td>
<div id="c2"></div>
</td>
<td>
<div id="ca2"></div>
</td>
<td>
<div id="m2"></div>
</td>
<td>
<div id="mp2"></div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3"></div>
</td>
<td>
<div id="p31"></div>
</td>
<td>
<div id="c3"></div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>

The answer was to make my jQuery addClass and Remove Class to be more specific:
$("#alarm").click(function(){
$("#tableContainer th").addClass("blink");
$("#tableContainer td").addClass("blink");
});
$("#stopAlarm").click(function(){
$("#tableContainer th").removeClass("blink");
$("#tableContainer td").removeClass("blink");
});

How to add a CSS class with animation to the border of a table's cells?

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>

How to switch src and onclick with previous and next buttons?

Hello im working on a game fan guide page but now I will not go any further and search for help.
I need a way to get the next or/and previous img on click a previous arrow and next arrow.
All this is new for me and i have test many but nothing have work, i hope anyone can help me out.
now i have see my html have make issus but i have fix and now i can post my html.
I have the CSS style and HTML for a better view split but in my html it is alle in one and a meta for viewport.
edit: sry, but i have make thinking errors. it is not enough to change the pic i have to change the wohle div content.
explane on click next have to change div id="card1" class="card_content" to div id="card2" class="card_content"
a img {
border:none;
}
.card_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
}
.card_content {
display: none;
position: absolute;
height:600px;
width:305px;
top: 50%;
left: 50%;
margin-top: -258px;
margin-left: -156px;
padding: 6px;
background-color: black;
z-index: 1002;
overflow: auto;
}
#card_icons {
width:299px;
border:0;
}
.card_case {
background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
background-repeat: no-repeat;
height:435px;
width:299px;
border:0;
}
.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}
#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}
<table>
<tr>
<td>
<img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" />
<img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" />
</td>
</tr>
</table>
<div id="card1" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png"></td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="card2" class="card_content">
<table id="card_icons">
<tr>
<td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td>
<td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td>
</tr>
</table>
<table class="card_case">
<tr>
<td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png">
</td>
</tr>
</table>
<div class="switch_card">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></td>
<td> </td>
<td align="right"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></td>
</tr>
</table>
</div>
<div id="back_to"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></div>
</div>
<div id="fade" class="card_overlay"></div>

The code below may help you.
// index.html
<img src="01.png" id="pic">
// script.js
document.getElementById("pic").setAttribute("src", "02.png")

Got it done with
<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='non‌​e';document.getEleme‌​ntById('fade').style‌​.display='none';docu‌​ment.getElementById(‌​'card2').style.displ‌​ay='block';document.‌​getElementById('fade‌​').style.display='bl‌​ock'" unselectable="off">
But how do i make the javascript: void with a script.js

Categories

Resources