Rotating items in a cell by clicking on it - javascript

I am trying to create a mutual exclusion toggle without using an onclick button within HTML since my HTML isn't allowed to be changed. Within my javascript I am trying to use event listeners and getting elements by tag name but nothing seems to be working. Any ideas?
window.onload(function () {
let cells = document.getElementsByTagName(`td`).item(0);
for (let cell of cells) {
cell.addEventListener(`click`, rotate);
function rotate() {
document.getElementsByTagName(`A`).item(0);
document.getElementsByTagName(`B`).item(0);
document.getElementsByTagName(`C`).item(0);
document.getElementsByTagName(`D`).item(0);
}
}
});

I created a snippet for you that adds a listener to each td and makes some function in my case I made it change the inner text of the red box
const td = document.querySelectorAll('td');
const text = document.querySelector('.clicked');
td.forEach( e => {
e.addEventListener('click', event => {
text.innerText = e.innerText;
//your function
})
});
table {
width: 90vw;
height: 50vh;
}
td {
height: 33%;
width: 33%;
border: 1px solid black;
text-align: center;
}
td:hover{
cursor: pointer;
background-color: grey;
color: white;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.clicked{
width: 80%;
height: 20%;
font-size: 18;
text-align: center;
border: 3px solid red;
padding: 2vh;
margin: 2vh;
}
<div class="flex">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
<div class="clicked">TEXT</div>
</div>

Related

How to undo class change in html table

When I try to undo class change,I suffer some problems.
I could get clicked element, but my desired result is to get class changed element and undo it.
For example in my snippet,I would like to undo all the class change at the same time.
In other words, I would like to getclass changed element array.
Are there any method?
Thanks
let clicked=[];
$(function() {
$("td").click(function() {
$(this).nextAll(':lt(4)').addClass('color');
let clickedID=$(this).attr('id');
clicked.push(clickedID);
});
});
$(function() {
$("#btnCancel").on('click',() => {
if(clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).removeClass();
}
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.color {
background-color: hsl(60,100%,60%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=1>1</td>
<td id=2>2</td>
<td id=3>3</td>
<td id=4>4</td>
<td id=5>5</td>
<td id=6>6</td>
<td id=7>7</td>
<td id=8>8</td>
<td id=9>9</td>
</tr>
</table>
<button id="btnCancel">undo</button>
.removeClass([className]) Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
$('td#${lastClicked}').nextAll(':lt(4)').removeClass('color'); would return the last selected/updated elements.
let clicked = [];
$(function() {
$("td").click(function() {
$(this).nextAll(':lt(4)').addClass('color');
let clickedID = $(this).attr('id');
clicked.push(clickedID);
});
});
$(function() {
$("#btnCancel").on('click', () => {
if (clicked.length) {
let lastClicked = clicked.pop();
$(`td#${lastClicked}`).nextAll(':lt(4)').removeClass('color');
}
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.color {
background-color: hsl(60, 100%, 60%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=1>1</td>
<td id=2>2</td>
<td id=3>3</td>
<td id=4>4</td>
<td id=5>5</td>
<td id=6>6</td>
<td id=7>7</td>
<td id=8>8</td>
<td id=9>9</td>
</tr>
</table>
<button id="btnCancel">undo</button>

Dropdown within table (CSS/HTML/Java)

I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):
Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>

JQuery - Click to keep a div displayed [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
when a div .TQA-SF006-U-160mm-parent is clicked, I want .div-TQA-SF006-U-160 to be displayed always and .div-TQA-SF006-U-static to be hidden after mouseout function is executed.
Any help would be appreciated.
JSFiddle example here
one easy way to do this is to add a global variable to check, whether that div condition is clicked or not. Then, you execute mouseover and mouseout event, when that div is not clicked
var clicked = false;
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
}
});
$(".TQA-SF006-U-160mm-parent").on('mouseout', function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
}
});
$(".TQA-SF006-U-160mm-parent").click(function(){
if (clicked == false){
$(".div-TQA-SF006-U-static").hide();
$(".div-TQA-SF006-U-160").show();
clicked = true;
}
else{
$(".div-TQA-SF006-U-static").show();
$(".div-TQA-SF006-U-160").hide();
clicked = false;
}
});
demo : https://jsfiddle.net/xpk82w65/4/
Also, you can attach binding to same elements, without re-calling those elements.
for example :
$(".TQA-SF006-U-160mm-parent").on('mouseover',function(){
})
.on('mouseout', function(){
})
.on('click', function(){
});
demo : https://jsfiddle.net/xpk82w65/6/
You can add a class to track the state of the element you're hovering/clicking, and only use the mouseover/mouseout code if the state is not clicked.
$(document).ready(function() {
var $parent = $(".TQA-SF006-U-160mm-parent"),
$static = $(".div-TQA-SF006-U-static"),
$160 = $(".div-TQA-SF006-U-160");
$parent.on('mouseover', function() {
if (!$(this).hasClass('clicked')) {
$static.addClass('hide');
$160.addClass('show');
}
}).on('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$static.removeClass('hide');
$160.removeClass('show');
}
}).on('click', function() {
$(this).addClass('clicked');
$static.addClass('hide');
$160.addClass('show');
});
});
.div-TQA-SF006 .td-suspension-child-row2:hover {
text-decoration: underline;
}
.table-suspension-list {
border: 0;
}
.table-suspension-list .partNumber {
border: 1px solid #1F497D;
border-bottom: 1px solid white;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber-bottom {
border: 1px solid #1F497D;
background-color: #1F497D;
color: white;
font-family: erasFamily;
font-size: 16px;
font-weight: bold;
padding: 0;
vertical-align: middle;
}
.table-suspension-list .partNumber div {
color: white;
}
.table-suspension-list .partNumber-bottom div {
color: white;
}
.table-suspension-list .partDescription {
border: 1px solid #1F497D;
color: #1F497D;
font-family: erasFamily;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 5px;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.table-suspension-list .partDescription div {
color: #1F497D;
}
.table-suspension tbody {
text-align: center;
vertical-align: middle;
color: #002060;
}
.table-suspension th {
background-color: white;
border: 0;
border-top: 2px solid #002060;
padding: 10px 0 10px 0;
vertical-align: middle;
font-family: erasFamily;
font-size: 26px;
color: #002060;
text-transform: uppercase;
}
.td-suspension-parent {
background-color: #deeaf6;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.td-suspension-child {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child-row2 {
background-color: white;
text-align: center;
vertical-align: middle;
}
.td-suspension-child div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.td-suspension-child-row2 div {
font-size: 30px;
font-weight: bold;
padding: 5px;
}
.div-TQA-SF006-U-160 {
display: none;
}
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-TQA-SF006">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPECIFICATIONS
</th>
<tr>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Part Number</td>
<td class="td-suspension-parent" colspan="3" style="width: 50%">Description</td>
</tr>
<tr>
<td class="td-suspension-child" colspan="3">TQA-SF006</td>
<td class="td-suspension-child" colspan="3">Underslung Air Suspension for 10 Ton Axle</td>
</tr>
<tr>
<td class="td-suspension-parent" colspan="6">Available Ride Height</td>
</tr>
<tr>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-160mm-parent">160mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-200mm-parent">200mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-250mm-parent">250mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-275mm-parent">275mm</div>
</td>
<td class="td-suspension-child-row2" style="width:20%">
<div class="TQA-SF006-U-300mm-parent">300mm</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-static">
<table class="table-suspension">
<tbody>
<th>
Spare Parts
</th>
<tr>
<td class="td-suspension-parent">Hover mouse over desired Ride Height for pop-up information</td>
</tr>
</tbody>
</table>
</div>
<div class="div-TQA-SF006-U-160">
<table class="table-suspension">
<tbody>
<th colspan="6">
SPARE PARTS
</th>
<tr>
<td class="td-suspension-parent">TQA-SPA07</td>
<td class="td-suspension-parent">TQA-PB006</td>
<td class="td-suspension-parent">TQA-AB08</td>
<td class="td-suspension-parent">TQA-SA08</td>
<td class="td-suspension-parent">TQA-UB001</td>
<td class="td-suspension-parent">TQA-SPA20</td>
</tr>
<tr>
<td class="td-suspension-chlid">Parabolic Spring Straight Type</td>
<td class="td-suspension-chlid">Pivot Bolt Kit</td>
<td class="td-suspension-chlid">Air Spring</td>
<td class="td-suspension-chlid">Shock Absorber</td>
<td class="td-suspension-chlid">U-Bot Kit</td>
<td class="td-suspension-chlid">Spring Bush</td>
</tr>
</tbody>
</table>
</div>

.outerHeight & .outerWidth grows exponentially, when setting table cell height & width

Another web developer wanted to freeze the left-most column and allow scrolling of the table. He found this code and implemented into his client's site. The code does its job and works as expected.
However he added some #media queries to make the table a bit more responsive. When doing so it screwed up the table. It left the left column to not be aligned with the rest of the table.
#media screen and (max-width: 699px) and (min-width: 520px) {
.exportTable th{
min-width: 170px !important;
}
.exportTable td{
min-width:170px !important;
max-width:170px !important;
}
}
So I added the function call inside a window.resize().
$(document).ready(function () {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
$(window).resize(function() {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
});
});
The code was called upon resize of the window however, the outerHeight and outerWidth grew exponentially, causing a serious issue.
The issue happens when you set the height:
$(this).css('height', current_row_height);
and the width/margin:
$(this).css('position','absolute')
.css('margin-left','-'+table_collumns_margin[index]+'px')
.css('width',table_collumns_width[index])
Here is a fiddle.
Simply grab the window and resize back and forth, the table cell's height/width will exponentially grow, causing a serious issue.
This fiddle demonstrates how when you hit the #media queries that the left column will be misaligned. (it's important when viewing this fiddle to get the #media query to be hit.)
How can I resolve these issues?
In my opinion, adding javascript to the equation makes it overly complex. I believe what you want can be accomplished with CSS alone.
How this works, if the browser has a max-width of 500px, then remove the sticky column. If not, show the sticky column.
Unless you need to support browsers older than IE 9, then try this on for size:
https://jsfiddle.net/BmLpV/284/
CSS:
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
#media (max-width: 500px) {
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
position: relative;
top: auto;
width: auto;
}
.zui-scroller {
margin-left: 0;
}
}
HTML:
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
Edit: To support dynamic heights, you could do something like this:
$(function(){
$('.zui-table tr').each(function(i, row) {
var height = $('.zui-sticky-col').eq(i).outerHeight() - $('.zui-sticky-col').eq(i).height();
$('.zui-sticky-col').eq(i).height($(row).height() - height);
});
})
For better performance, you could only access the element once:
$(function(){
$('.zui-table tr').each(function(i, row) {
var el = $('.zui-sticky-col').eq(i);
var height = el.outerHeight() - el.height();
el.height($(row).height() - height);
});
})
https://jsfiddle.net/BmLpV/289/

Get image to overlay on top of table

I have a table of basketball stats and I have an image of a basketball court that will later contain a shot chart. It is initially hidden. I want the image to only appear when the user clicks a button. And the image should appear on top of the of table. (Most of the table will be behind the image)
I can't seem to manipulate the CSS or Jquery position to allow that to happen. Part of the problem is that I want the table itself to be centered (margin: 0px auto;)
I started a JSFiddle here: https://jsfiddle.net/Thread7/f7g9dtxt/ to work it out. If you click "Show Court" you will see what happens now. The image is at the bottom and to the left. Instead of the top and middle.
Code Below:
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th> </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>
CSS:
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
margin: 0px auto;
}
JQuery:
$("#showimg").click(function(e) {
$("#court").show();
});
You should wrap your table in element with relative position, than place the image (also in container with absolute position). That way you have better control over those elements. Check it out:
$("#showimg").click(function(e) {
$(".myimg").toggle();
});
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.table_container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show/Hide Court
</button>
<div class="table_container">
<table class='mytable'>
<tr>
<td>Michael</td>
<td>Jordan</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>LeBron</td>
<td>James</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>Kobe</td>
<td>Bryant</td>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>Magic</td>
<td>Johnson</td>
<td>6</td>
<td>11</td>
</tr>
</table>
<div class="myimg">
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
</div>
</div>
Also at updated fiddle
Try this: https://jsfiddle.net/f7g9dtxt/3/
$('.yourImage').toggle();
$("#showimg").click(function(e) {
$('.yourImage').toggle();
});
.mytable td {
text-align: left;
border: solid;
padding: 2px;
margin: 0px;
}
.mytable {
position: absolute;
z-index: 0;
}
.yourImage {
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
Put an img tag here!
</span>

Categories