I want to remove a HTML table completely from the screen and still be able to add rows to it later. I have the following code to remove all rows from a table (basically, it sets the inner HTML of the table to ""):
function removeAllRows() {
table = document.getElementById("myTable")
table.innerHTML = ""
}
However, when this function is called, the table isn't completely removed...there's a small speck on the table, which I believe has to do with the 1 pixel border of a table element.
I'd like to modify this function to completely remove the table from the screen, which would basically be hiding the table border when the table is empty.
Is there something that I could put in the style block to do this?
Right now, my style block looks like:
table, td {
border: 1px solid black;
border-collapse: separate;
empty-cells: hide;
}
empty-cells: hide; will hide the borders of empty cells, but not the border of the whole table if the whole table has no cells.
Is there any way to hide the border of an empty table?
fiddle
To just hide the table you can do this...
function removeAllRows() {
var table = document.getElementById("myTable")
// Checking that the table element exists before setting it to hidden to avoid nullreference exceptions.
if(!!table){table.hidden = true;}
}
You can alter the border programmatically. Add this line in removeAllRows()
table.style.border="0px";
Then in the addRow() method, add the border back:
table.style.border="1px solid black";
You can add a no border class to you table
function removeAllRows() {
table = document.getElementById("myTable")
table.innerHTML = ""
table.className = 'no-border';
}
And in you CSS file:
.no-border {
border: none;
}
Did not manage to solve it with CSS alone.
But you can either hide the table or just toggling the classlist property
if (table.children.length) {
table.classList.toggle('border') // whatever should replace default
}
Related
I want to change the background color of a row if the value in the table cell goes above a certain value.
I have tried implementing the toggle class as well as adding and removing classes with no luck. When I manually implemented the background color it worked.
I know I am trying to toggle a class vs a style, but is there any way I can toggle a style to change the background color?
var mq2 = 5;
if (mq2 >= 5) {
document.getElementById("row1").classlist.toggle("change2");
} else {
document.getElementById("row1").classlist.toggle("change1");
}
.change1 {
background-color: #FF6347;
}
.change2 {
background-color: #90EE90;
}
<tr id="row1">
Your code should work. You could improve it by creating a variable referencing the element
const row = document.getElementById("row1");
if(someCondition) {
row.classList.toggle("change2");
} else {
row.classList.toggle("change1");
}
The approach you are taking is fine, just make sure you capitalize classList correctly.
document.getElementById('row1').classList.toggle('change1');
I have created a table to display JSON data via a for loop in a function. Because I have created the table this way, it has no ID/Class.
I have hidden the last three columns of the table in CSS via the following method, where (n) is the column number:
#divIdName table tr td:nth-child(n) {
display: none; }
#divIdName table th:nth-child(n) {
display: none; }
I am trying to display them via three javascript functions, using queryselector but directly coping the CSS i.e.
function showColumnN () {
if (ArrayName.indexOf("StringName")>-1) {
var colNd = document.querySelector("td:nth-child(n)");
var colNh = document.querySelector("th:nth-child(n)");
colNd.style.display = "block";
colNh.style.display = "block"; }
However only one of the hidden columns is displayed, and it contains just the three headings (one on top of another) and first row data (one on top of another) from each of the three.
Does anyone know where I'm going wrong and how I can get the full columns to display?
EDIT: I omitted that there was a conditional in the showColumnN function, to check whether a particular string is in a particular array and proceed with the column unveiling if this were so.
However only one of the hidden columns is displayed
That's because you've only selected the first td and th matching those selectors, but there are (presumably) multiple tds that match (one per row).
To keep going the way you're going (but don't, keep reading), you'd need to loop through those:
function showColumnN(n) {
showAll(document.querySelectorAll("td:nth-child(" + n + ")"));
showAll(document.querySelectorAll("th:nth-child(" + n + ")"));
}
function showAll(list) {
Array.prototype.forEach.call(list, function(element) {
element.style.display = "block";
});
}
However, I'd probably use a CSS solution instead where you could add classes to the table that would show those columns:
table.show1 tr > th:nth-child(1), table.show1 tr > td:nth-child(1) {
display: block;
}
table.show2 tr > th:nth-child(2), table.show2 tr > td:nth-child(2) {
display: block;
}
...and so on. Then showing column 2 (for instance) is:
document.querySelector("selector-for-the-table").classList.add("show2");
(Or better yet, use hideX classes that hide them, and only add those as appropriate. Then you don't have to do the block thing.)
Side note: The default display for td and th isn't block, it's table-cell.
You could do:
var table=document.getElementById("divIdName");
var rows=table.getElementsByTagName("tr");
rows.forEach((row)=>{
elems=row.getElementsByTagName("td");
for(i=0;i<4;i++){
elems[elems.length-4+i].style.display="block";
}
});
However T. J. Crowders answer is much shorter...
I'm using Bootstrap and have a striped table that can be filtered by selecting some options on a form. Javascript interprets the form inputs, and hides rows from the table that don't match the selected criteria.
However, this breaks the table striping on the table depending on which rows are hidden (gray rows next to gray rows, white rows next white rows).
I'd like to reapply the striping based on what rows are visible after filtering the results. How can I do this?
Using .remove() on the table rows is not an option, because I may need to show them again if the filter criteria changes and I'm trying to avoid using AJAX to update the table dynamically based on the filter inputs (I'd like to stick to hiding DOM elements).
Any help is appreciated! I can clarify the question if needed :)
Seems like Bootstrap 4 have a different implementation. Following #Anthony's answer, this is how it would work:
$("tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1)? "rgba(0,0,0,.05)" : "rgba(0,0,0,0)");
});
Tables are now striped by pure CSS and not by adding the "stripe" class name.
Yes, this is definitely one of the annoying parts of table striping. The better part of valor here is probably just to reapply the striping with jQuery after each update:
$("tr:not(.hidden)").each(function (index) {
$(this).toggleClass("stripe", !!(index & 1));
});
Anthony's answer did not work for me. First, it does not hide the Bootstrap table class table-striped, and second, there is not (or at least does not appear to be) a built-in class stripe for table rows.
Here's my approach, where I've filtered rows in a table with an id of "reports".
Here's a version to use if you define the class "stripe" for <tr> elements:
// un-stripe table, since bootstrap striping doesn't work for filtered rows
$("table#reports").removeClass("table-striped");
// now add stripes to alternating rows
$rows.each(function (index) {
// but first remove class that may have been added by previous changes
$(this).removeClass("stripe");
if ( index % 2 == 0) {
$(this).addClass("stripe");
}
});
If you're too lazy to define the CSS class "stripe" then here's a quick & dirty version:
// un-stripe table, since bootstrap striping doesn't work for filtered rows
$("table#reports").removeClass("table-striped");
// now add stripes to alternating rows
$rows.each(function (index) {
// but first remove color that may have been added by previous changes:
$(this).css("background-color", "inherit");
if ( index % 2 == 0) {
$(this).css("background-color", "#f9f9f9");
}
});
This is the same answer as #Jacobski's answer but will keep the hover effect of a bootstrap table-hover.
$("tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1) ? "rgba(0,0,0,.05)": "rgba(0,0,0,0)");
if (!(index & 1)) {
$(this).hover(
function () { //On hover over
$(this).css("background-color", "rgba(0,0,0,.07)");
},
function () { //On hover out
$(this).css("background-color", "rgba(0,0,0,0)");
}
)
}
});
My answer build upon what #Jacob and #yehuda suggested.
This works with bootstrap4, for a table that needs both the behavior of ".table-striped" and ".table-hover".
The hover part is handled by CSS, which makes it more efficient (I noticed a small delay due to javascript handler, when testing #yehuda's snippet).
// CSS
<style>
.table-striped tbody tr.visible-odd {
background-color: rgba(0, 0, 0, 0.05);
}
.table-striped tbody tr.visible-even {
background-color: rgba(0, 0, 0, 0.00);
}
.table-hover tbody tr.visible-even:hover {
background-color: rgba(0, 0, 0, 0.075);
}
</style>
// JS
$("tr:visible").each( function(index, obj) {
if (index % 2) {
$(this).addClass('visible-odd').removeClass('visible-even');
} else {
$(this).addClass('visible-even').removeClass('visible-odd');
}
});
For me this works fine with hidden rows and reapplies the striping as expected:
$("table#ProductTable").removeClass("table-striped");
$("table#ProductTable").addClass("table-striped");
#Jacobski's answer was great, but I had some pages with multiple tables and the header row's background would get changed on separate tables. Also my table rows that were always visible had the class "accordion-toggle" not sure if that's a bootstrap 5 thing, but that is how I targeted it! (also I don't know JavaScript so there's probably cleaner syntax to do what I did)
$("tr:visible").each(function (index) {
if ($(this).hasClass("tb-header")) {
rowIndex = 0; // need to reset the rowIndex since we are now on a new table!
} else {
if ($(this).hasClass("accordion-toggle")) {
$(this).css("background-color", !!(rowIndex & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,.05)");
rowIndex++;
}
}
});
I want to change the background color of the cell based on its text contents using jquery.
Example:
For the second row in the "Exceeds" td, I want to change the background color to green because it has Exceeds as it's text...
<table>
<tr><td>Jedi Armor1</td><td>Needs</td></tr>
<tr><td>Jedi Armor2</td><td>Exceeds</td></tr>
</table>
I'm assuming you want to change the color of the cell and only the cell. If you want to change the color of it based on its text, use the contains() jQuery selector :
CSS :
.greenBg {
background: green;
}
jQuery :
$("td:contains('Exceeds')").addClass('greenBg');
jsFiddle Demo
Edit :
If you want to restrict this to the second column only, this would be more suited :
$("td:nth-child(2):contains('Exceeds')").addClass('greenBg');
In case someone would want to change the color of the whole column :
$("td:nth-child(2):contains('Exceeds')").closest('table').find('td:nth-child(2)').addClass('greenBg');
jsFiddle Demo
Native JS:
var td = document.getElementsByTagName("td");
var i = 0, tds = td.length;
for (i; i < tds; i++) {
if (td[i].innerHTML == "Exceeds") {
td[i].setAttribute("style", "background:green;");
}
}
Here's a jsfiddle to show: http://jsfiddle.net/vHvLh/
Update Following Question Clarification:
Demo Fiddle
To change the background color of one cell based on the value of another, you can use e.g:
$('table tr td:nth-child(4)').each(function () {
$(this).text() == 'Exceeds' && $(this).parent().find('td:nth-child(2)').css('background-color', 'green');
});
To change the background of a specific column:
$('table tr td:nth-child(2)').css('background-color', 'red');
However you should try to maintain the seperation of styles by using CSS, in which case you can accomplish this with:
table tr td:nth-child(2){
/* styles*/
}
Or..if you specifically need dynamic control, instead of allocating the style directly in jQuery, add a class:
$('table tr td:nth-child(2)').addClass('rowBackground');
Then in your CSS:
.rowBackground{
background-color:red;
}
You can use .eq() or :eq() selector:
$('table tr td:eq(3)').css('background-color','green');
or use .last() if the td that you want to change the color is always the last td:
$('table tr td').last().css('background-color','green')
I have a table that is created dynamically using PHP and Javascript. Now, I'm trying to styling the last one <tr> to add a padding and border, but it doesn't work.
How can I proceed? I need call some element like trigger('create') or others?
Part of my code:
$.ajax ( {
beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
url: "http://www.someweb.com/somePHP.php",
dataType: "json",
success: function (data, textStatus, jqXHR) {
for(var i = 0; i< data[1].length;i++){
table += "<tr><td>"+data[1][i].mon_da+"</td>";
table += "<td>"+Number(data[1][i].mon_qu).toFixed(2)+"€</td>";
table += "<td>"+data[1][i].mon_con+"</td></tr>";
}
table += "<tr style='border:1px solid;padding-top:20px;'><td colspan='2'><b>Disp:</b></td><td><b>"+Number(data[0].usr_to).toFixed(2)+"€</b></td></tr>";
document.getElementById("tableMo").innerHTML = table;
}
});
You can't apply styles to <tr>s like that.
You can try applying them to the <td>s instead.
I would personally prefer to add a class to the tr and handle the styles externally to JS in a CSS file.
jsFiddle
HTML
<tr class="stylish">
<td colspan='2'><b>Disp:</b></td>
<td><b>"+Number(data[0].usr_to).toFixed(2)+"€</b></td>
</tr>
CSS
.stylish td {
border:1px solid #000;
padding-top:20px;
}
.stylish td:first-child {
border-right:0;
}
.stylish td:last-child {
border-left:0;
}
You can get the table element by id and then add CSS style property with javascript:
for example:
document.getElementById("tableMo").style.border = "1px solid black";
document.getElementById("tableMo").style.padding = "10px";
Check out some DOM style tutorial, it might help you
http://www.w3schools.com/jsref/dom_obj_style.asp
One way of doing this is to add a class to your tr tags like so:
table += "<tr class='rowStyle'><td>"+data[1][i].mon_da+"</td>";
now you can style the rows,
or if you want to style the table itself, you can use jquery to get the parent of the row like so:
var obj = $('.rowStyle').closest('table');
and just give it an ID:
$(obj).attr('id','tableID');
Now just style it.
Although this is a lengthy method of doing it.
Hope this helps :)
You can do that using jquery css selector