How to add collapse to table rows - javascript

I have a table in my page and don't want to show entire table at once. Instead, I'd like to show only 3 rows by default. Then, when a user clicks on the more button, I want to display all rows.
I tried the below code to accomplish that, but had a rendering issue. Is there any possibility to add collapse to table rows in html?
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<span class="more clickable" data-toggle="collapse" data-target="#remaining-data">more
</span>
</td>
</tr>
<table class="collapse table table-stripped" id="remaining-data">
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
</table>
<table>

I have used nth-child(4) that means it will get 3rd tr and add display: none CSS to every tr after that due to nextAll() now when I click on more button it will toggle the element with fade effect, there is no need to write new table or tbody
$(function(){
$("table tr:nth-child(4)").nextAll().css("display","none");
$(".clickable").on("click", function(){
$("table tr:nth-child(4)").nextAll().fadeToggle();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<span class="more clickable btn btn-sm pull-right btn-link">more
</span>
</td>
</tr>
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
<table>

Don't use a second table, but instead a <tbody> element to wrap multiple rows together. These <tbody> elements can be used multiple times within the same table (see link). Using a second table leads to a different width of the columns. Furthermore, you added a second table inside only one cell of the parent table.
Here is an example:
document.querySelector('.more').addEventListener('click', function() {
document.querySelector('.initially-hidden-rows').classList.remove('hidden');
});
table td,
table th {
border: 1px solid black;
}
.more {
color: blue;
cursor: pointer;
text-decoration: underline;
}
.hidden {
display: none;
}
<table>
<tbody class="initial-rows">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<a class="more">more</a>
</td>
</tr>
</tbody>
<tbody class="initially-hidden-rows hidden">
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
</tbody>
<table>

Related

Add and remove html element by jquery

How can I add new <tr> after a clicked <tr>. On click of this <tr> and remove now created when click other <tr> (with repeat 1st scenario) by jQuery?
I tried like this, but it does not work:
$("#test_table tr").click(function() {
$(this).prev().remove();
$(this).closest('tr').append('<tr><td>2.2</td></tr>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Given your goal it seems that you want to replace the current tr with the new HTML snippet. To do that you just need to call after() to insert the new HTML, then remove() to clear the original tr:
$("#test_table tr").click(function() {
$(this).after('<tr><td>2.2</td></tr>').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
However, as the only effect of this is to change the text within the td, you can just call text() instead:
$("#test_table tr").click(function() {
$(this).find('td').text('2.2');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>

Alternate Table Row Background Color Based on Column Value Changing

I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)
You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});

mouseevent for jquery for selection on click

I want to set the color when my mouse click on the specific row on table and it should not change the color when mouse leave from that row. Please gothrough my coding and you will understand.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").mouseenter(function(){
$(this).css("background-color", "lightgray");
});
$("tr").mouseleave(function(){
$(this).css("background-color", "white");
});
$("tr").on("click", function(){
$(this).css("background-color", "yellow");
});
});
</script>
</head>
<body>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
<tr id="trid5">
<td>5</td>
<td>kumar</td>
<td>vnr</td>
</tr>
<tr id="trid6">
<td>6</td>
<td>kali</td>
<td>mdu</td>
</tr>
<tr id="trid7">
<td>7</td>
<td>madu</td>
<td>ttl</td>
</tr>
<tr id="trid8">
<td>8</td>
<td>kalai</td>
<td>mdu</td>
</tr>
</table>
</body>
</html>
According to the above code, if we enter the mouse into a table row, it changes to the lightgray color. After that, when we leave that row, it changes to white color. Then, when we click on a specific row, it changes to yellow color, when we leave from that it also changed to white color.
My need is, if I click on the row of a table, it should set yellow color and it should not change to white when leaving.
Please help me in this issue. Thanks in advance.
In general, it is not a correct aprroach. You shouldn't change inline styling of every item - that's why people have invented CSS.
Describe the CSS rules for tr and for a custom class like selected. Then, just add selected class to tr on click.
$(document).ready(function(){
$("tr").on("click", function(){
$(this).addClass("selected");
});
});
tr:hover {
background-color: lightgray;
}
tr {
background-color: white;
}
tr.selected, tr.selected:hover, tr.selected:focus {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
</tr>
</table>
Now, you can easily manipulate with colors, hover effects etc.
For example, if you want to disable this "yellow-selecting" on clicking again and add an effect to selected tr on hover - you can change it in a moment by editing a single line of code. Check this example out (click on a row twice):
$(document).ready(function(){
$("tr").on("click", function(){
$(this).toggleClass("selected");
});
});
tr:hover {
background-color: lightgray;
}
tr {
background-color: white;
}
tr.selected, tr.selected:hover, tr.selected:focus {
background-color: yellow;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
</tr>
</table>
You can use a mix of css and jQuery as given below.
To set the mouseover style, use :hover rule, but exclude the clicked elements are given below
$(document).ready(function() {
$("tr").on("click", function() {
$(this).addClass('clicked');
});
});
tr:not(.clicked):hover {
background-color: lightgrey;
}
tr.clicked{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
<tr id="trid5">
<td>5</td>
<td>kumar</td>
<td>vnr</td>
</tr>
<tr id="trid6">
<td>6</td>
<td>kali</td>
<td>mdu</td>
</tr>
<tr id="trid7">
<td>7</td>
<td>madu</td>
<td>ttl</td>
</tr>
<tr id="trid8">
<td>8</td>
<td>kalai</td>
<td>mdu</td>
</tr>
</table>
Add This CSS No Use Jquery
table tr:hover{backgound:red;}
table tr:focus{backgound:yellow;}

jquery toggle <td> on click of a button

I have a table that has a few items inside, and a button for each that will display more information on the specific item on the menu.
my HTML table is below
<table id="menu_breads">
<thead>
<tr>
<th colspan="2">BREADS</th>
</tr>
<tr>
<th>ITEM</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>Portugese Rolls
<button class="myButton">&#x2C5</button>
</td>
<td>R1.49</td>
</tr>
<tr>
<td colspan="2" class="more">A hand made selection of Portugese rolls</td>
</tr>
<tr>
<td>Hotdog Buns
<button class="myButton">&#x2C5</button>
</td>
<td>R0.99</td>
<tr>
<td colspan="2" class="more">A hand made selection of Hotdog buns</td>
</tr>
</tr>
<tr>
<td>French Loaf
<button class="myButton">&#x2C5</button>
</td>
<td>R3.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of French loaves</td>
</tr>
</tr>
<tr>
<td>Sead Roll
<button class="myButton">&#x2C5</button>
</td>
<td>R2.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Seed Rolls</td>
</tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<h6>Prices may change without prior warning</h6>
</td>
</tr>
</tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
<thead>
<tr>
<th colspan="2">CONFECTIONARIES</th>
</tr>
<tr>
<th>ITEM (per slice)</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cream Slice
<button class="myButton">&#x2C5</button>
</td>
<td>R12.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Cream slices</td>
</tr>
</tr>
<tr>
<td>Chocolate Cake
<button class="myButton">&#x2C5</button>
</td>
<td>R15.99</td>
<tr>
<td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
</tr>
</tr>
<tr>
<td>Coconut Eclaire
<button class="myButton">&#x2C5</button>
</td>
<td>R2.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
</tr>
</tr>
<tr>
<td>Chocolate Eclaire
<button class="myButton">&#x2C5</button>
</td>
<td>R4.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
</tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<h6>Prices may change without prior warning</h6>
</td>
</tr>
</tfoot>
</table>
My CSS is here
.myButton {
background: #183C4C;
border-radius: 31%;
border:2px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:11px;
text-decoration:none;
width: 15%;
float: right;
}
.more {
display: none;
}
Demo
and the jquery is what I am having a bit of a problem understanding. Would I need to ID every td that I want to display or can I do it with classes and an on click toggle event?
I have managed to get it to display on click, the problem is that all the hidden rows display and not just the individual one.
$(document).ready(function(){
$('.myButton').click(function(){
$(this).closest('tr').next().find('.more').toggle();
if ($(this).closest('tr').is(":visible")) {
$(this).html("&#x2C4")
}
else {
$(this).html("&#x2C5")
}
});
});
You wouldn't have to give IDs to every td, that'd be overkill. You want something dynamic. Assuming that your HTML structure will stay the same, you can do:
EDIT: Added the ability to toggle plus and minus icons from comments
$(".myButton").on("click", function () {
var more = $(this).closest("tr").next("tr").find(".more");
more.toggle();
if (more.is(":visible")) {
//show minus icon, hide plus
}
else {
//show plus icon, hide minus
}
});
DEMO (thanks Rory)
The more should be given to the tr - also your markup is not valid(you have a tr as child of tr - the more tr is child of the button tr)
<tr>
<td>Portugese Rolls
<button class="myButton">&#x2C5</button>
</td>
<td>R1.49</td>
</tr>
<tr class="more">
<td colspan="2">A hand made selection of Portugese rolls</td>
</tr>
then
$('.myButton').click(function(){
$(this).closest('tr').next().toggle();
})
Demo: Fiddle
If you don't want to change anything
$('.myButton').click(function(){
$(this).closest('tr').next().find('.more').toggle();
})
Demo: Fiddle
Have you tried this:
$(".myButton").on("click",function() {
$(this).closest("tr").toggle();
})

Master-detail with HTML, CSS and jQuery

I want to create a master-detail. So, I follow this tutorial:
http://mrbool.com/how-to-create-a-master-detail-table-with-html-css-and-jquery/26848
I decided to reproduce it, but there is something wrong in my code(?).
Here's my code:
HTML/jQuery
<!DOCTYPE html>
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
$(".clk").click(function () {
var index = $(this).parent().parent().index();
var detail = $(this).parent().parent().next();
var status = $(detail).css("display");
if (status === "none")
$(detail).css("display", "table-row");
else
$(detail).css("display", "none");
});
});
</script>
</head>
<body>
<table id="tbSales" rules="rows">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="saleRow">
<td></td>
<td>01</td>
<td>01/01/2001</td>
<td>2</td>
<td>10,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>Product A 1</td>
<td>1</td> <td>7,00</td>
</tr>
<tr>
<td>A2</td>
<td>Product A 2</td>
<td>1</td>
<td>3,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="saleRow">
<td></td>
<td>02</td>
<td>02/02/2001</td>
<td>3</td>
<td>20,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>Product B 1</td>
<td>1</td>
<td>10,00</td>
</tr>
<tr>
<td>B2</td>
<td>Product B 2</td>
<td>2</td>
<td>5,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
</table>
</body>
CSS:
#tbSales, .tbItems{
width:100%;
border:solid 1px;
}
#tbSales thead th, .tbItems thead th{
text-align:left;
}
#tbSales tr td, .tbItems tr td{
border:solid 1px;
}
#tbSales tr td:nth-child(1){
width:20px;
}
#tbSales tbody tr{
background:#DCDCDC;
}
.tbItems tr{
background:red;
}
#tbSales thead{
background:#4682B4;
}
.itemsRow{
display: none;
}
.tbItems{
font-size:12px;
}
This is what should happen:
This is what happen to me:
The row is empty! Why?
$("td:nth-child(1)")
Is overriding all first children from table.
You need to specify the line in which you want to replace the cell:
$(".saleRow td:nth-child(1)")
Your first line of javascript replaces the contents of all first children from your table.
Change :
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
with :
$("td:nth-child(1)").css("border","red dashed 2px")
and you'll see what I mean.
See it here : http://codepen.io/jeremythille/pen/qELyWX
td:nth-child(1) means "Every first <td> of each <tr> of the whole table". But you have nested tables...

Categories