Using Javascript (with JQuery), I would like to delete all rows in a table except the header row.
This seems like a simple thing because I see quite a few posts on StackOverFlow about this and a lot of solutions provided and accepted. But, none of them seem to work for me. Please refer to my code below:
function delTable() {
console.log("Delete all rows, but the header");
// Option-A
// $('#TableA tbody tr').remove();
// Option-B
// Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
// $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();
// Option-C
$('#TableA tbody').empty();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body onLoad="delTable();">
<table id="TableA">
<th>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</th>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
Does any one know what I am doing wrong? Thanks.
-Karthik
Just update your th to thead and you good to go, see below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body onLoad="delTable()">
<table id="TableA">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
JS:
function delTable() {
console.log("Delete all rows, but the header");
// Option-A
// $('#TableA tbody tr').remove();
// Option-B
// Accepted answer for: https://stackoverflow.com/questions/9420203/how-to-remove-all-rows-of-the-table-but-keep-the-header
// $('#TableA tr').not(function(){ return !!$(this).has('th').length; }).remove();
// Option-C
$('#TableA tbody').empty();
}
Working fiddle:
https://jsfiddle.net/pvfkxdby/1/
You need to replace th with thead and use $('#TableA tbody').find("tr") as follows:
function delTable() {
console.log("Delete all rows, but the header");
$('#TableA tbody').find("tr").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body onLoad="delTable();">
<table id="TableA">
<thead>
<tr>
<td>Col A</td>
<td>Col B</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
This worked for me. You set apart your header with <th> instead of <thead> and then you had <td> in your header instead of <th>.
$(document).ready(() => {
$("#delete").click(() => {
$("#TableA tbody tr").remove()
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="TableA">
<thead>
<tr>
<th>Col A</th>
<th>Col B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
<button id="delete">delete</button>
By inspecting your HTML in my Google Chrome I can see that the rows were rearranged so that even the first line is inside <tbody> tag. Therefore the whole table is removed. You can fix this simply by wrapping the first row in <thead> tag or use different approach which does not use <tbody> tag.
That would be a simple one-liner:
function delTable() {
console.log("Delete all rows, but the header");
$('#TableA').find("tr:not(:first)").remove(); // Code to remove all rows in table except the header row
}
What the given code does is identify the rows in the table 'TableA' that is not the first row using the command: $('#TableA').find("tr:not(:first)") and subsequently remove the rows using the .remove() command.
Related
I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">
Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>
you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>
I have a datatable and I want to extract the column 1
var usernames = dataTableTeamMembers.columns(1).data();
But it gives me an array like this:
Array(2)
0
:
"admin"
1
:
"catalao"
I only want the text, not the html.
How do I extract the innertext of that a tag?
There's two approaches:
With .column() (with each one):
$(document).ready(function() {
var dataTableTeamMembers = $('#example').DataTable();
dataTableTeamMembers.column(1).data().each(function(username, index){
console.log(username);
});
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger</td>
</tr>
<tr>
<td>2</td>
<td>Garrett</td>
</tr>
<tr>
<td>3</td>
<td>Tiger</td>
</tr>
<tr>
<td>4</td>
<td>Ashton</td>
</tr>
<tr>
<td>5</td>
<td>Garrett</td>
</tr>
</tbody>
</table>
And .columns() (returns array):
$(document).ready(function() {
var dataTableTeamMembers = $('#example').DataTable();
console.log(dataTableTeamMembers.columns(1).data()[0]);
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger</td>
</tr>
<tr>
<td>2</td>
<td>Garrett</td>
</tr>
<tr>
<td>3</td>
<td>Tiger</td>
</tr>
<tr>
<td>4</td>
<td>Ashton</td>
</tr>
<tr>
<td>5</td>
<td>Garrett</td>
</tr>
</tbody>
</table>
You have 3 options, depending on what you need
1 using DataTables API
var table = $('#your_table_id').DataTable().data();
for(var i = 0; i < table.length; i++)
{
var tbl_obj = table[i];
//do stuff
console.log(JSON.stringify(table[i]))
}
2 Using jquery to get all row html
$('#your_table_id tr').each(function() {
console.log($(this).html());
});
3 to get a specific cell on a row, by cell class
$('#your_table_id tr').each(function() {
var obj = $(this).find(".cell_class").html();
});
Use the one which fits more to your needs.
i have a dynamic table . that i'd add number for each tr. how can i replace the hello text with count of each tr with javascript?
here is my snippet of table:
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>
</body>
</html>
you should be using <td> instead of <th> after the header row.
$('tr').each(function(index, row){
$(row).children('td').first().text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>
Here is the solution for your problem -
var table = document.querySelector("#myTable");
var rows = table.querySelectorAll("tr");
let index = 0;
for( let row of rows){
for( let col of row.querySelectorAll("th")){
if( col.textContent == 'Hello'){
col.textContent = index;
}
}
index++;
}
<table border="1" id="myTable">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>
You need to get all the <tr> elements within the table. Then loop through the <tr>s and starting with the second one, replace its first child's text with the index of the current <tr>.
let tableRows = document.querySelectorAll("tr")
tableRows.forEach((tr, index) => {
if(index === 0) {
//Do nothing bc you don't want to remove the text in the first table row
} else {
let firstChild = tr.children[0]
firstChild.innerText = index
}
})
You can use find("td:first") to get the numbers that would replace "Hello". Also, since its a table, you need to use td. th are used for headers:
$('tr').each(function(index, row) {
$(row).find("td:first").text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>
I have an HTML TABLE:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>
I need a javascript/jquery code, which delete the last column (message) in the table:
function deleteLastColumn() {
$("#theadID tr th:not(:last-child)......
$("#tbodyID tr td:not(:last-child)......
}
So the result should be this:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
</tr>
</tbody>
</table>
I know there is the ":not(last)" method, but I can't find any example to my problem.
Could anyone help me?
Try
$('#persons tr').find('th:last-child, td:last-child').remove()
Demo: Fiddle
You can use this solution to achieve it easily..
function myFunction() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
allRows[i].deleteCell(-1);
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="my_table">
<thead >
<th>Column 1</td>
<th>Column 2</td>
<th>Column 3</td>
</thead >
<tr >
<td>Number 1</td>
<td>String 1</td>
<td>Decimal 1</td>
</tr>
<tr >
<td>Number 2</td>
<td>String 2</td>
<td>Decimal 2</td>
</tr>
<tr >
<td>Number 3</td>
<td>String 3</td>
<td>Decimal 3</td>
</tr>
</table><br>
<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>
In addition to Arun P Johny's answer,
That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.
function deleteLastColumn() {
$(document).find('.last').remove()
}
after adding class last to the last td and th of the table.
Demo : Fiddle
I have a table that looks something like this:
<asp:Repeater ID="myRepeater" runat="server">
<div id="divTable" class="divTable">
<table id="myTable">
<thead>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</thead>
<tbody id="myContent">
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td id="findMe">
<%#Eval("IsFlagged")%>
</td>
</tr>
</tbody>
</asp:Repeater>
</table>
</div>
Now, here's what I'm trying to do. If <%#Eval("IsFlagged")%> returns anything at all, i'd like to make all the cells in the table row a certain color.
I've been reading about .contains(), but I haven't found an example that simply asks "if not null, apply a .css style to the rest of the cells of the table row".
I put together an example in jsfiddle: http://jsfiddle.net/aMR5r/
Edit: Your edit makes the code a little simpler, but it's the same principle.
$(function(){
var isFlagged = $('#findMe').text();
if(isFlagged.length > 0)
{
$('#findMe').parent().addClass('yellow');
}
});
http://jsfiddle.net/aMR5r/1/
First, try to give that specific td a class or someting so you can target it. Then you can check the length of $('td.yourclassname').html();
If you are using VB.Net then you can use this code..
<tr style="background-color:<%# IIF(IsDBNull(Eval("IsFlagged"),"none","yellow") %>">
you can apply this logic to TD also.