I'm developing an ASP.NET MVC application with C#, .NET Framework 4.7 and jQuery 3.1.1.
I have a view with a table:
<table id="myTable">
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr id="row_x"> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
...
I want to hide all the rows under the row <tr id="row_x"> ... </tr> but I don't know how to access those rows. Do I need to set an id to all of them?
I've thought to surround them with a <div> but I don't think it is a good idea or possible.
You can use the jQuery method nextAll()
$("#row_x").nextAll().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr id="row_x">
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
</tr>
<tr>
<td>Row 8</td>
</tr>
<tr>
<td>Row 9</td>
</tr>
</tbody>
</table>
$("#row_x").nextAll('tr').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr id="row_x">
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
</tr>
<tr>
<td>Row 8</td>
</tr>
<tr>
<td>Row 9</td>
</tr>
</tbody>
</table>
Just try like this
$('#row_x').nextAll('tr').hide();
Related
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>
I want when the user clicks the button with the class name "removeElement" the next "td" with class "forRemove" should have its contents removed.
How can I do it?
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>
The solution to your problem is here.
$('.removeElement').click(function(e){
$(this).parent().next().remove();
});
Also, I create the fiddle for you.
checkout this
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>
<script>
const buttons = document.getElementsByClassName('removeElement');
for(let i =0; i < buttons.length; ++i) {
buttons[i].onclick = function(event) {
const parent = event.currentTarget.parentNode.parentNode;
parent.children[parent.children.length - 1].innerHTML = "";
}
}
</script>
Is this more or less what you're looking for? To be honest I wouldn't access table elements like this, this is doing a bit much for such simple functionality, for exmaple, on the buttons I would add an indexer at the end of the class name or id, I would use IDs for in this case not only because is faster but also because you'd want quicker access to these elements without the hassle of having to go through so many nodes. i.e.:
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button id="removeElement-0" class="removeElement">removeNextTd</button>
</td>
<td class="forRemove-0">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button id="removeElement-1" class="removeElement">removeNextTd</button>
</td>
<td class="forRemove-1">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button id="removeElement-2" class="removeElement">removeNextTd</button>
</td>
<td class="forRemove-2">BODY 4</td>
</tr>
</tbody>
</table>
<script>
const buttons = document.getElementsByClassName('removeElement');
for(let i =0; i < buttons.length; ++i) {
buttons[i].onclick = function(event) {
document.getElementsByClassName("forRemove-"+event.currentTarget.id[event.currentTarget.id.length-1])[0].innerHTML = "";
}
}
</script>
But Whatever works for you mate.
This clears the td. It is still there so the table wouldn't brake, but it is emty.
$('.removeElement').on('click', function() {
$(this).closest('tr').find('.forRemove').empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>
This will remove the contents of the next TD, with the class forRemove
$(".removeElement").on("click", function() {
$(this).closest("tr").find(".forRemove").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>
In short, when you click the button it will find the nearest tr element by traversing up the DOM tree, and then find the element within that with the class forRemove, and then empty() it.
not exactly what you asked but you can do it like this with jquery
$this .parent()
.parent()
.remove();
since the delete button is within the row you want to delete this should work
we are currently developing an internal report for a client and I can't quite crack this one...
I have a HTML table with a variable amount of column headers and then a variable amount of data rows. Each in the table is assigned a class of either 'td-Red' 'td-Green' or 'td-Grey'. This controls the colour of the cell.
If all of a column's tds have the 'td-Grey' class, we want to hide the entire column including the header.
I'm sure this can be done with jQuery but I'm failing to do so...
Is anybody able to help?
Loop through the headings , use heading index to filter data cells in each column that also have the grey class. Compare length of that collection to total rows and hide accordingly
var $dataRows = $('#myTable tbody tr'),
rowCount = $dataRows.length;
$('#myTable thead th').each(function(i){
var $greyCells = $dataRows.find('td:eq(' + i + ').td-Grey');
if($greyCells.length === rowCount){
$greyCells.add(this).hide();
console.log('Hiding column index = ',i)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-Grey">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td class="td-Grey">Col 4</td>
<td>Col 5</td>
</tr>
<tr>
<td class="td-Grey">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td class="td-Grey">Col 4</td>
<td>Col 5</td>
</tr>
<tr>
<td class="td-Grey">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td class="td-Grey">Col 4</td>
<td>Col 5</td>
</tr>
<tr>
<td class="td-Grey">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td class="td-Grey">Col 4</td>
<td>Col 5</td>
</tr>
<tr>
<td class="td-Grey">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td class="td-Grey">Col 4</td>
<td>Col 5</td>
</tr>
</tbody>
</table>
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>
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>