onclick show/hide next table rows - javascript

onclick get button show/hide next rows between the clicked button and next button.
How to display these rows as hidden first and after that i can switch between show and hide them. if it is possible with vanilla JavaScript and CSS.
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<td><button>show/hide</button> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
</table>


The key here to achieve what you want is to use .nextUntil("tr:has(button)")
as in:
$('table button').click(function() {
var n = $(this).closest("tr").nextUntil("tr:has(button)");
n.toggle()
})
Demo
$('table button').click(function() {
var n = $(this).closest("tr").nextUntil("tr:has(button)");
n.toggle()
})
table,
th,
td {
border: 1px solid black;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><button>show/hide</button> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
</table>


With vanilla javascript you can utilise the indexOf method to find where the table-row element containing the clicked button is and then iterating over N rows after and toggling the display state.
document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
/* create an array from the nodelist so that `indexOf` can be used */
let col=[...document.querySelectorAll('tr')];
/* find the parent table row of the invoking button */
let tr=this.parentNode.parentNode;
/* find which table row in the array was the event source */
let index=col.indexOf( tr ) + 1;
/* process the next N records/rows */
for( let i=index; i < index + 2; i++ ){
col[i].style.display=col[i].style.display=='table-row' || col[i].style.display=='' ? 'none' : 'table-row'
}
}))
table, th, td {
border: 1px solid black;
}
tr{display:table-row}
<table>
<tr>
<td><button>show/hide</button> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AA</td>
<td>BB</td>
<td>CC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><button>show/hide</button> AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
</table>

Related

How to delete each third row from <tbody> using only JavaScript? [duplicate]

This question already has an answer here:
Javascript table tr deletes on tr (Dynamic tr delete and re-generate tr id)
(1 answer)
Closed 3 years ago.
I want to delete each third row in this code.
How I can do this?
Thanks for any answers
I was trying to do something like this:
const table = document.getElementById('myTable');
for (let i =0; i <table.rows.length; i++) {
if (i%3 === 0 ) {
table.deleteRow(i)
}
}
I have this table:
<tbody>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
I need a script which I will put in the console of my browser and I will delete each third row in anything table. Thank you!

The problem is that as soon as you remove a row from your table, the tables rows.length property decreases by 1 as well as the the order of your rows changes. (thus after removing, the next third will be a different element as before removing)
Better iterate over the elements from the last to the first like:
var myTable = document.getElementById("myTable");
for (var a = myTable.rows.length - 1; a > 0; a--) {
if ((a + 1) % 3 === 0) {
myTable.deleteRow(a)
}
}
<table id="myTable">
<tbody>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>

You can try the following way:
var table = document.querySelectorAll('tbody tr');
for (let i =0; i <table.length; i++) {
if(i%3==2)
table[i].remove();
}
<table>
<tbody>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>

Use Array.forEach to iterate over a selection of all the rows.
const tableRows = document.querySelectorAll("#mytable tr")
Array.from(tableRows).forEach((row, i) => {
if ((i + 1) % 3 === 0) {
row.parentNode.removeChild(row);
}
})
<table id="mytable">
<tbody>
<tr>
<td>1 row.</td>
</tr>
<tr>
<td>2 row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>7 row.</td>
</tr>
<tr>
<td>8 row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>
Or use ECMAScript 2015's spread syntax to do the same thing
[...document.querySelectorAll('#mytable tr')].forEach((el, i) => {if (i % 3 === 2) {el.remove()}});
<table id="mytable">
<tbody>
<tr>
<td>1 row.</td>
</tr>
<tr>
<td>2 row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>7 row.</td>
</tr>
<tr>
<td>8 row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>

How to set different background color for dynamic table row with similar values?

In my application I am in need to set different background color to table row based on similar td value which is dynamic data. I tried to achieve this but I was unable to group the table row with different background color. I have attached the expected result screen-cap along with the fiddle link.
fiddle
HTML CODE
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>73023-04041</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>
JS CODE
$("table tr td:nth-child(2)").each(function () {
var tdVal = $(this).children().find("span").text();
var valueColor = $(this).children().find("span").text();
if (valueColor == tdVal) {
//alert("if");
$(this).parent("tr").addClass("trColor");
}
});
Expected Result

You could use a filter in an each loop:
var $lastChildren = $("tbody td:last-child"); // get all last children
var colourCounter = 1;
$lastChildren.each(function() { // loop
var $child = $(this); // get the current child
if (!$child.hasClass('coloured')) { // check if it has already been coloured
var testNumber = $child.text(); // if not get the text
var $filtered = $lastChildren.filter(function() {
return $(this).text() === testNumber; // filter any other children with same text
})
if ($filtered.length) {
$filtered.addClass('coloured') // add class to say it is colored (and not include in further tests)
.parent().addClass('trColor' + colourCounter); // add colour class to row
colourCounter++;
}
}
});
/* not sure how you were going to do this colouring - I've used an incremental counter */
.trColor1 {
background-color:green;
}
.trColor2 {
background-color:lightblue;
}
.trColor3 {
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>73023-04041</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</tbody>
</table>

Here is my jsfiddle with working code. You need to give multiple classes in css and assign different colors.
https://jsfiddle.net/SmitRaval/t5ft82z2/58/
HTML
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td><span>73023-04041</span></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>
CSS
table td {
border:1px solid #000;
}
.trColor0 {
background-color:pink;
}
.trColor1 {
background-color:red;
}
.trColor2 {
background-color:blue;
}
.trColor3 {
background-color:green;
}
.trColor4 {
background-color:yellow;
}
JS
$(document).ready(function(){
var i = 0;
$("table tr td:nth-child(3)").each(function () {
var tdVal = $(this).text();
$("table tr td span").each(function(){
if(tdVal == $(this).text()){
$(this).closest("tr").addClass("trColor"+i);
}
});
i++;
});
});

You can have a look at following a piece of code as well.
Basically, I am creating an object with desired keys with respective Colors associated with them.
var colorMap = {};
$("table tr td:nth-child(3)").each(function () {
var tdVal = $(this).find("span").text();
//alert(tdVal);
if(checkItemExist(tdVal,colorMap) == false)
colorMap[tdVal] = 'trColor'+ (Object.keys(colorMap).length+1)+'';
//alert(JSON.stringify(colorMap));
$(this).parent("tr").addClass(colorMap[tdVal]);
});
function checkItemExist(item,array){
for (var k in array){
if (k == item){
return true;
}
}
return false;
//colorMap.indexOf(tdVal) == -1
}
table td{
border:1px solid #000;
}
.trColor1{
background-color:pink;
}
.trColor2{
background-color:red;
}
.trColor3{
background-color:green;
}
.trColor4{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>roll</th>
<th>name</th>
<th>Random number</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td><span>73023-04041</span></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td><span>73023-04042</span></td></td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td><span>73023-04040</span></td>
</tr>
<tr>
<td>4</td>
<td>Name 4</td>
<td><span>73023-04042</span></td>
</tr>
<tr>
<td>5</td>
<td>Name 5</td>
<td><span>73023-04041</span></td>
</tr>
</table>

How to prevent clicking on header column

How to prevent click event in a header column.
HTML:
<table>
<tr>
<th class="column">Header</th>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
And my script
$('.column:not("th")').on('click', function(){
alert("test");
});

Why not:
$('td.column').on('click', function(){
alert("test");
});

Add tbody selector on you code
$('tbody .column').on('click', function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="column">thead</th>
</tr>
<tr>
<th class="column">thead Body 1</th>
</tr>
<tr>
<th class="column">thead Body 2</th>
</tr>
<tr>
<th class="column">thead Body 3</th>
</tr>
</thead>
<tr>
<td class="column">Header</td>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>

html table rows height issue

Okay so I made that table which I want it too look like a gradebook but I cant edit the row heights.
In the picture below I drew a line around the rows I want their size to be decrease so they can look different than the student's rows.
and heres the HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 table-responsive">
<table class="table table-bordered" style="background-color:white;">
<tbody>
<tr>
<th rowspan="4">Student</th>
<th>Assignment</th>
<td>Assignment 1</td>
<td>Assignment 2</td>
<td>Assignment 3</td>
<td>Assignment 4</td>
</tr>
<div>
<tr>
<th>Category:</th>
<td>Category 1</td>
<td>Category 2</td>
<td>Category 3</td>
<td>Category 4</td>
</tr></div>
<tr>
<th>Due:</th>
<td>Due 1</td>
<td>Due 2</td>
<td>Due 3</td>
<td>Due 4</td>
</tr>
<tr>
<th>Points:</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>Moemen Waleed</td>
<td>90% A-</td>
<td>Moemen 1</td>
<td>Moemen 2</td>
<td>Moemen 3</td>
<td>Moemen 4</td>
</tr>
<tr>
<td>Mazen Waleed</td>
<td>93% A</td>
<td>Mazen 1</td>
<td>Mazen 2</td>
<td>Mazen 3</td>
<td>Mazen 4</td>
</tr>
</tbody>
</table>
</div>

Add this style to your hmtl:
<style>
tr:nth-child(-n+4){
line-height: 10px;
min-height: 10px;
height: 10px;
}
</style>
This styles all first four rows in the table.
Here is the result: https://jsfiddle.net/Lbx8xh1a/4/

You can add line-height to that <tr> tags.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 table-responsive">
<table class="table table-bordered" style="background-color:white;">
<tbody>
<tr style="line-height: 6px;">
<th rowspan="4">Student</th>
<th>Assignment</th>
<td>Assignment 1</td>
<td>Assignment 2</td>
<td>Assignment 3</td>
<td>Assignment 4</td>
</tr>
<div>
<tr style="line-height: 6px;">
<th>Category:</th>
<td>Category 1</td>
<td>Category 2</td>
<td>Category 3</td>
<td>Category 4</td>
</tr></div>
<tr style="line-height: 6px;">
<th>Due:</th>
<td>Due 1</td>
<td>Due 2</td>
<td>Due 3</td>
<td>Due 4</td>
</tr>
<tr style="line-height: 6px;">
<th>Points:</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>Moemen Waleed</td>
<td>90% A-</td>
<td>Moemen 1</td>
<td>Moemen 2</td>
<td>Moemen 3</td>
<td>Moemen 4</td>
</tr>
<tr>
<td>Mazen Waleed</td>
<td>93% A</td>
<td>Mazen 1</td>
<td>Mazen 2</td>
<td>Mazen 3</td>
<td>Mazen 4</td>
</tr>
</tbody>
</table>
</div>

Display first or on top those records in the table by a preferred creteria

Is there a way I could display first those records inside the table that has a 'branch' of 'BRANCH 1'? any ideas, help please? below is my snippet.
$(document).ready(function(){
$("#dtable").DataTable( {
"pagingType": "full_numbers",
"dom": 'T<"clear">lfrtip',
"lengthMenu": [[10, 25, 50, -1],[10, 25, 50, "All"]],
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="dtable" class="table table-hover">
<thead>
<tr>
<th>NAME</th>
<th>BRANCH</th>
</tr>
</thead>
<tbody>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 2</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 2</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 2</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
</tbody>
</table>

You need to use default sort of datatable more information can be found here:
https://datatables.net/examples/basic_init/table_sorting.html
Basically you just need "order": [[ 1, "asc" ]]
Demo:
$(document).ready(function(){
$("#dtable").DataTable( {
"pagingType": "full_numbers",
"dom": 'T<"clear">lfrtip',
"lengthMenu": [[10, 25, 50, -1],[10, 25, 50, "All"]],
"order": [[ 1, "asc" ]]
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="dtable" class="table table-hover">
<thead>
<tr>
<th>NAME</th>
<th>BRANCH</th>
</tr>
</thead>
<tbody>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 2</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 2</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 2</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 3</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
<tr>
<td>NAME 1</td><td>BRANCH 1</td>
</tr>
</tbody>
</table>

Categories