I'm trying to achieve a sort of selection effect on a table that I'm currently working on. I want to do this by adding a class to the table row that the user clicks. The class that gets added to the row will add a small circle to the left of the row. However, as I'm adding the class to the row, the table (or the row) seems to expand a few pixels. I can't figure out why.
Some example code to illustrate my problem:
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('clicked')) {
this.classList.add('clicked');
return;
}
this.classList.remove('clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.clicked:before {
position: absolute;
content: '';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
}
<table>
<tr>
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
Any help would be much appreciated!
You could add your clicked:before element and set it's opacity to 0 and then on the click event add another class to actually show the element.
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('show-clicked')) {
this.classList.add('show-clicked');
return;
}
this.classList.remove('show-clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
tr {
margin-left: 10px;
}
.clicked:before {
position: absolute;
content: '';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
opacity: 0;
}
.show-clicked:before {
opacity: 1;
}
<table>
<tr class="clicked">
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
I have a trick. I hope it works as what you want
document.querySelector('tr').addEventListener('click', function() {
if (!this.classList.contains('clicked')) {
this.classList.add('clicked');
return;
}
this.classList.remove('clicked');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.show-me {
width: 10px;
height: 10px;
border: 0;
background-color: transparent;
}
.show-me span {
display: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
}
.clicked .show-me span {
display: block;
}
<table>
<tr>
<td class="show-me">
<span></span>
</td>
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
You could use the css visibility property and an extra class. This way any effect that is caused by ::before will be in the rendering but just not visible.
Summary The visibility property can be used to hide an element while
leaving the space where it would have been. It can also hide rows or
columns of a table.
document.querySelector('tr').addEventListener('click', function () {
this.classList.toggle('visible');
});
table {
position: relative;
background: #ccc;
margin: 5rem auto;
}
.clicked::before {
position: absolute;
content:'';
right: 100%;
top: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: yellow;
visibility: hidden;
}
.visible::before {
visibility: visible;
}
<table>
<tr class="clicked">
<td>1</td>
<td>Two</td>
<td>3</td>
<td>Four</td>
<td>1</td>
<td>Longer text..</td>
<td>3</td>
<td>Four</td>
</tr>
</table>
This post helped me solve the problem. Seems :before actually "creates" a new table cell. Had to add the :before to the first <td> in my code instead of the <tr>.
Is it possible to use pseudo-elements (:after, :before) inside a table row?
Related
I have a table and I would like to change a class on the td by clicking them. When I addClass() each cell changes but it seems override any class.
My desired result for each cell is like this:
How can I achieve this by adding a class to them?
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
background-color: aqua;
}
.outpatient {
background-color: yellow;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
To achieve this can create another element inside each td. The td will be used to display the square with the teal background. The inner element is necessary to show the circle with the yellow background. By default the circle can be hidden, and then displayed when the class is added to the parent td. Try this:
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
overflow: hidden;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
cursor: pointer;
background-color: aqua;
padding: 0;
margin: 0;
position: relative;
}
td div {
width: 32px;
height: 32px;
border: 1px solid transparent;
line-height: 32px;
margin: -1px;
box-sizing: border-box;
}
td.outpatient div {
background-color: yellow;
border-radius: 50%;
border-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
<td><div>5</div></td>
<td><div>6</div></td>
</tr>
<tr>
<td><div>7</div></td>
<td><div>8</div></td>
<td><div>9</div></td>
</tr>
</table>
You can consider background-image with radial-gradient to create the circle above the background-color
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 15px;
cursor: pointer;
background-color:aqua;
}
.outpatient {
background-image:
radial-gradient(farthest-side,yellow calc(100% - 3px),#000 calc(100% - 2px),transparent 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
I have some span objects that I insert into a table with jQuery with a specific width attribute. I want the widths of these objects to change as the window size changes, as the table has position relative.
Here is my code (The snippet doesn't show the issue very well - changing window size, but it gives an idea of the context):
$(document).ready(function() {
var var1 = 2
var element = $('td').filter(function() {
var holidayText = $(this).contents()[0].textContent.trim();
return parseInt(holidayText, 10) == var1;
});
//need this to adjust with table size
var cell_width = element.width();
var2 = 3;
var width = var2 * cell_width;
add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>');
});
div.class1 {
position: relative;
}
table {
border: 1px solid navy;
width: 70%;
text-align: center;
}
table th {
text-align: center;
width: 100px;
height: 20px;
}
table td {
width: 100px;
height: 100px;
vertical-align: top;
text-align: right;
border: 1px solid #c6c6ec;
position: relative;
}
span.spanclass {
background-color: purple;
height: 14px;
display: inline-block;
padding: 2px;
left: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class1">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
How do I get a width attribute / assign a new attribute that means this widths scales with the table/window size? Do I use em for this? Or as a percentage width?
Thanks
You have to use $(window).resize().
I have changed your script and it's working for me:
https://fiddle.jshell.net/71rd84jy/
Let me know. Cheers.
Why use js in a first place?
$(document).ready(function() {
var var1 = 2
var element = $('td').filter(function() {
var holidayText = $(this).contents()[0].textContent.trim();
return parseInt(holidayText, 10) == var1;
});
add_html = element.append('</br><span class="spanclass"></span>');
});
div.class1 {
position: relative;
}
table {
border: 1px solid navy;
width: 70%;
text-align: center;
}
table th {
text-align: center;
width: 100px;
height: 20px;
}
table td {
width: 100px;
height: 100px;
vertical-align: top;
text-align: right;
border: 1px solid #c6c6ec;
position: relative;
}
span.spanclass {
background-color: purple;
height: 14px;
display: inline-block;
padding: 2px;
left: 0;
z-index: 1;
position: absolute;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
Notice box-sizing: border-box; - it make width 100% including 2px of padding, otherwise it would be [2px]+[100%]+[2px]
I'm creating a mobile navigation that slides down, and I'm using .slideToggle() to animate it
fiddle
html
<table id=menu>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr></table>
css
#menu {
display: none;
position: absolute;
margin-top: 50px;
width: 100%;
height: 150px;
background-color: #fff;
z-index: 8;
}
tr {
height: 50px;
}
js
$(".toggle").click(function() {
$("#drop").toggleClass('flip');
$("#menu").slideToggle(300);
});
but the table is taller than my header and when the it slides to the top of the page it just disappears instead of finishing the slide animation (see fiddle).
Any way to solve this? Or a better animation to use?
Thanks!
What you're seeing is the margin-top animating - but jQuery cannot animate the height of a <table> element (more info in similar thread). Wrap the <table> in a <div> element and animate that, like so:
$(document).ready(function() {
$(".toggle").click(function() {
$("#drop").toggleClass('flip');
$("#menu").slideToggle(300);
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
header {
background-color: #fff;
height: 50px;
width: 100%;
position: absolute;
box-shadow: 0px 1px 3px #d3d3d3;
z-index: 9;
}
#drop {
height: 15px;
position: absolute;
margin-left: 15px;
margin-top: 18px;
-moz-transition: transform .5s;
-webkit-transition: transform .5s;
transition: transform .5s;
}
.flip {
transform: rotate(-180deg);
}
#menu {
display: none;
position: absolute;
margin-top: 50px;
width: 100%;
height: 150px;
background-color: #fff;
z-index: 8;
}
#menu table {
width: 100%;
}
tr {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<img alt=menu class="toggle" id="drop" src=# />
</header>
<div id="menu">
<table>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
</table>
</div>
i think this issue with your table, i have put a div before the table, now the issue is solved
$(function(){
$(".toggle").click(function() {
//$("#drop").toggleClass('flip');
$("#menu").slideToggle(400);
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
header {
background-color: #fff;
height: 50px;
width: 100%;
position: absolute;
box-shadow: 0px 1px 3px #d3d3d3;
z-index: 9;
}
#drop {
height: 15px;
position: absolute;
margin-left: 15px;
margin-top: 18px;
-moz-transition: transform .5s;
-webkit-transition: transform .5s;
transition: transform .5s;
}
.flip {
transform: rotate(-180deg);
}
#menu {
display: none;
position: absolute;
margin-top: 50px;
width: 100%;
height: 150px;
float:left;
background-color: #fff;
z-index: 8;
top:0;
}
#menu table {
width:100%;
}
tr {
height: 50px;
}
<header>
<img alt=menu class="toggle" id="drop" src=# />
</header>
<div id=menu>
<table>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
<tr>
<td align="center">link</td>
<td align="center">link</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I am trying to make a scrollable table with vertical and horizontal scroll bars and with fixed header.
But when i try to make the header in fixed position,my vertical scroll bar becomes hidden and appears only when i scroll extreme right.
similarly,if i make the scroll bars visible,my header becomes movable.
Please advise.
PFB my CSS code.
.button-container{
text-align: center;
}
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
width: 100%;`}
.outer-container {
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: hidden;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-y:hidden;
}
.header-table-container {
float:left;
width: 100%;
}
.header-table{
background: #0088CC;
width=100%;
cellpadding=0;
cellspacing=0;
}
.body-table-container {
float:left;
height: 100%;
}
.body-table{
width=100%;
cellpadding=0;
cellspacing=0;
height:500px;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.headerCol {
width: 160px;
min-width: 160px;
text-align: center;
}
.bodyCol {
width: 160px;
min-width: 160px;
}
.resultsCol {
width: 250px;
min-width: 250px;
}
.even {
background: lightgrey;
}
.button-container{
text-align: center;
}
.results{
text-align: left;
}
#preprod-wrapper{
}
#prod-wrapper{
height:500px;
}
Its not too easy, but take a look here:
https://fiddle.jshell.net/805s75hb/
Many things were used here, such as position and overflow.
I hope it can help you. :)
Have you tried this?
table {
border-collapse: collapse;
overflow :scroll;
}
I have used two tables one for header to make it static so that it would fixed.
Have a look if this can help you :)
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am trying to get the following result:
Button onclick
Clone closet Table <td></td> contents
Append to div
Here is my code:
$(document).on('click', '.addtofavs', function() {
var user_id = $(this).closest('tr').find('.userId').text();
$("tr").clone().appendTo("#favorite");
$("#tfhover tr").clone().appendTo("#div");
});
but this clones the whole table and appends to the div.
How can I solve this?
The problem is that you're running the clone method like this:
$("tr").clone().appendTo("#favorite");
This will clone the entire matched set - every <tr> element in the document. If you want to clone specific <td> elements, you need to target them specifically. I think that's where you were going in setting the user_id variable, but you didn't do anything with it.
I don't know your HTML code but here's an example of appending and removing FIDDLE
HTML
<table>
<tr>
<td>1</td>
<td><button class="addtofavs">+</button></td>
<td>Name</td>
</tr>
<tr>
<td>2</td>
<td><button class="addtofavs">+</button></td>
<td>Name</td>
</tr>
<tr>
<td>3</td>
<td><button class="addtofavs">+</button></td>
<td>Name</td>
</tr>
<tr>
<td>4</td>
<td><button class="addtofavs">+</button></td>
<td>Name</td>
</tr>
<tr>
<td>5</td>
<td><button class="addtofavs">+</button></td>
<td>Name</td>
</tr>
</table>
<div id="favorite"></div>
CSS
table {
position: relative;
float: left;
border: 1px solid #ddd;
border-collapse: collapse;
}
td {
height: 22px;
padding: 0 5px;
line-height: 22px;
border: 1px solid #ddd;
}
td:first-child {
width: 15px;
text-align: center;
}
div {
position: relative;
float: left;
width: 150px;
height: 133px;
letter-spacing: 2px;
border: 1px solid #ddd;
}
.fav {
display: block;
float: left;
width: 25px;
height: 25px;
margin: 2px;
line-height: 25px;
text-align: center;
cursor: pointer;
border: 1px solid #ccc;
}
.rem {
background: #ddd;
position: absolute;
display: block;
margin-top: -17px;
margin-left: 20px;
padding: 0 3px;
font-size: 10px;
border-radius: 4px;
}
jQuery
$(function() {
$('.addtofavs').on('click', function() {
$('#favorite').append('<span class="fav">'+$(this).parent('td').prev().text()+'</span>');
});
$(document).on('mouseover','.fav', function() {
$(this).prepend('<span class="rem">Remove</span>');
}).on('mouseleave','.fav', function() {
$('.rem').remove();
});
$(document).on('click','.rem', function() {
$(this,'.rem').parent().remove();
});
});