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();
});
});
Related
How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>
I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}
set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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>
Here is the situation, I have a HTML file with a table, the table gets filled with XML data. The last column (10) got a number in it: 1, 2, 3, 4 or 5. I've got 5 lines of jQuery which look for the number and give the cell with the corresponding number a specific class, this works fine (The cell has 0% opacity because it's not meant to be "shown", but for our means, it works fine like that).
Now the problem is: Column 7 and 8 need to get that class to without the whole column getting it, just the row with the specific number.
I've got a jsfiddle so you can see the code and stuff:
The jQuery:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
Note: The data in the table is just for testing, the real xml will have those number of 1, 2, 3, 4, 5 in like 100 rows in a random order.
EDIT: Got a picture of how it should look:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
td:nth-child(10) {
opacity: 0;
}
.disaster{
background-color: #E45858
}
.high{
background-color: #E87658
}
.average{
background-color: #FEA058
}
.warning{
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {
max-width: 2600px;
display: block;
}
body {
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table {
text-align: left;
border-collapse: collapse;
}
th {
font-size: 75%;
font-weight: normal;
color: #768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td {
font-size: 75%;
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}
img {
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{
text-decoration: underline;
}
td:nth-child(1) {
background-color: #FFFFFF;
}
td:nth-child(2) {
background-color: #FFFFFF;
}
tr.NoHover:hover{
background-color: #FFFFFF;
}
tr:hover {
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {
width: 11px;
padding: none;
}
th.col3 {
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {
text-align: left;
width: 70px;
}
th.col5 {
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {
text-align: left;
width: 430px;
}
th.col7 {
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {
text-align: left;
width: 498px;
}
th.col9 {
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1) {
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) {
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {
text-align: left;
text-decoration: underline dotted;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(7) {
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {
text-align: left;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
<table id="Table">
<thead>
<tr class="NoHover">
<th class="col1" scope='col' >Time▼</th>
<th class="col2" scope='col' ></th>
<th class="col3" scope='col' >Client</th>
<th class="col4" scope='col' >Status</th>
<th class="col5" scope='col' >Site</th>
<th class="col6" scope='col' >Host</th>
<th class="col7" scope='col' >Problem • Cause</th>
<th class="col8" scope='col' ></th>
<th class="col9" scope='col' >Frequency</th>
<th class="col10" scope='col'></th>
</tr>
</thead>
<tbody id="TableData">
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 1</td>
<td>FAILING</td>
<td>Site 1</td>
<td>PC1</td>
<td>test1</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>1</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 2</td>
<td>FAILING</td>
<td>Site 2</td>
<td>PC2</td>
<td>test2</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>2</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 3</td>
<td>FAILING</td>
<td>Site 3</td>
<td>PC3</td>
<td>test3</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>3</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 4</td>
<td>FAILING</td>
<td>Site 4</td>
<td>PC4</td>
<td>test4</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>4</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 5</td>
<td>FAILING</td>
<td>Site 5</td>
<td>PC5</td>
<td>test5</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
I think you are looking for the .siblings() selector:
$("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
$("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
$("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
$("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
$("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');
Fiddle: https://jsfiddle.net/8sL86sc7/2/
Something like this maybe? (Fiddle)
$("tr").each(function(index) {
var row = $(this),
lastCol = row.find('td:nth-child(10)'),
appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
switch(lastCol.text()) {
case '1':
appendTo.addClass('disaster');
break;
case '2':
appendTo.addClass('high');
break;
case '3':
appendTo.addClass('average');
break;
case '4':
appendTo.addClass('warning');
break;
case '5':
appendTo.addClass('information');
break;
}
});
If there are a lot of rows and you don't need extra stuff to happen exept for the added classes, this could be overkill. the .siblings() selector (as in this answer) could be enough.
I am trying to design a table wherein at mobile view the last two to three columns which are not visible in mobile view should be made collapsible using only CSS and if possible Javascript not jQuery. This is to be done for salesforce web application so no jQuery is allowed. Any help would great.
Tried with this example:
http://codepen.io/anon/pen/QwPVNW
This is somewhat similar but I am unable to break the last two to three columns data and show it below.
body {
font-family: arial;
}
table {
border: 1px solid #ccc;
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
<table>
<thead>
<tr>
<th>Payment</th>
<th>Issue Date</th>
<th>Amount</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Payment">Payment #1</td>
<td data-label="Issue Date">02/01/2015</td>
<td data-label="Amount">$2,311</td>
<td data-label="Period">01/01/2015 - 01/31/2015</td>
</tr>
<tr>
<td data-label="Payment">Payment #2</td>
<td data-label="Issue Date">03/01/2015</td>
<td data-label="Amount">$3,211</td>
<td data-label="Period">02/01/2015 - 02/28/2015</td>
</tr>
</tbody>
</table>
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?