I have a bootstrap html table. filtering is used in the field. how do I make sure that the table contents are hidden before filtering starts?
filter script and html table:
$(document).ready(function(){
$("#surname").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#table tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<table class="table" id="table">
<thead class="thead-light">
<tr>
<th></th>
<th class="text-center" scope="col">Guest</th>
<th class="text-center" scope="col">Org</th>
Bootstrap v4 uses d-none for setting anything to "display: none".
Set each on each <tr class="d-none"> and they will be hidden on default. In your code, just after you filtered everything, let's show them again using jquery (not tested):
/* ... */
$("#table tr").filter(function () {
const show = $(this).text().toLowerCase().indexOf(value) > -1;
if (show) {
$(this).removeClass('d-none');
}
});
This post is more of a comment on BS-4 than anything....
Your requirement is very simple - first hide all the tr's and then on the filter - show the ones that meet the requirement.
Soap box moment -
I am not in favour of the new BS-4 utility classes and use of "!important" on everything.... to the casual observer - it may well be nice to simply apply the class to the elemnet and get the outcome - but when you look at the code or the less files from BS - EVERY SINGLE UTILITY CLASS IS STYLED WITH "!IMPORTANT"....
this can be seen in the following picture which shows a span with 4 utility classes - and ALL four classes are styled with the use of !important..... that alone is enough to make me re-consider BS as a viable option for creating sites - imagine all the important tags that you will have.
I also do not love the new approach of using a utility for every single style choice... imagine a div with 4 different margins styles, four different paddings, and four different border styles..... a utility class for each.... eek
Just my opinion - but for something as simple as display: none... do it with css and leave off the !important.
Related
This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 3 years ago.
I want to insert a navigation div inside all of my HTML documents. Is there a way to do so without putting the entire div inside of every document? I figured the solution would be similar to a CSS stylesheet.
I don't know of anyway of doing this without Javascript or jQuery, which I want to avoid using if possible.
<html>
<body>
<div>
//CONTENT//
<div>
</body>
</html>
I want to put the div inside of a separate document and put in a link of some sort to substitute that in every document that contains the div.
Edit: I Haven't notice that you also don't want to use JS.
I'll leave this answer as a partial solution for you problem.
The Solution:
If you don't want to use ANY Library like JQuery or frameworks like Angular/React/Vue then you have the option to use Web components (I've added the description from the link below).
Notice: Don't forget to check for Browser support.
With that you can choose HTML templates or Custom elements.
Let's take an example of HTML template:
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis:
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var template = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var tbody = document.querySelector("tbody");
var clone = document.importNode(template.content, true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
var clone2 = document.importNode(template.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
What is web components (From the developer.mozilla.org docs)?
As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.
Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.
In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
The only valid solution I can think of is adding the tooltip to each <td> (there are about ten per line, so the first 9), but I was wondering if there is any way to add the tooltip to the <tr> and then exclude the last <td> of displaying it.
My colleagues used Bootstrap for the styles (I haven't used it yet, but maybe it is relevant to the question).
You can set title only on [tr] and use a simple script to prevent tooltip on last-child
var ttip;
$(' tr > td:last-child').mouseenter(function() {
ttip = $(this).parent().attr('title');
$(this).parent().attr('title','');
});
$(' tr > td:last-child').mouseleave(function() {
$(this).parent().attr('title',ttip);
});
Trivially you detect mouseenter on last [td] to remove the title of its [tr] (saving its value), and on mouseleave of last-child you restore saved title.
Here a working jsfiddle
How to apply behaviour of some classes into another, without changing html?
I want:
<table class="name">
to have behaviour like this:
<table class="table table-striped table-bordered table-condensed">...
It is possible to achieve this with css?
UPDATE:
How to do this with preprocessors ( LESS / SASS )?
There is 2 ways to do this :
Manually adding classes to every table using jQuery
Using this method will mean you will see your site "flicker" the new classes once the javascript gets loaded (because CSS is less render blocking)
$('#name').addClass('table');
// or
$('table').addClass('table'); // Every table gets the class
Using a CSS Preprocessor like LESS or SASS (this exemple uses LESS)
#name { // Or table {
.table(); //This is the bootstrap mixin for tables
}
I have an angularjs app using several dynamic ngTables. As a result of a search operation executed on the page, I need to "highlight" one of the rows in one of the tables, but I'd like to remove the highlight after the user takes some action (any CTA execution, I would suppose).
I've managed to figure out how to add the "bold" class (although I really need to change the background color) to my "tr", "td", or a "span" around the content of a "td", using the data ngTable is iterating over. I've verified this in Firebug. However, I see no change on the screen. I'm guessing that the CSS settings used in ngTable are overriding what I'm setting.
What do I have to do to make ngTable change the background color of the table row?
Once I figure this out, I'll probably remove the class setting on a "$timeout" or on some CTA action.
ng-class
can be used to specify class. And It is possible to write expressions for ng-class.
For eg:
<table ng-repeat="questions in comment.employee">
<tbody>
<tr ng-class="{{e.ID == 1 ? 'class1' : 'class2'}} " >
<td>
{{e.Name}}
</td>
</tr>
</tbody>
</table>
Say you have a webpage with following sample code:
<tr class="even">
<td>something1</td>
<td colspan="1">somthing1.1</td>
</tr>
<tr class="odd">
<td>something2</td>
<td><b>something2.1</b></td>
</tr>
<tr class="even">
<td>something3</td>
<td><b>something3.1</b></td>
</tr>
These are not in a loop so I have to explicitly say 'even' 'odd'. Later on if we decide to add a new row between something2 and something3 then we need to change 'even' 'odd' for rest of the rows as well.
Is there way in css to do this automatically in IE6?
Currently this is my css code for even
.headerTable tr.even {
font-weight : bold;
font-size : 9pt;
font-family : Arial,Helvetica,sans-serif,Verdana,Geneva;
background-color: #FFFFFF;
height: 20px;
color: #000000;
}
I already had jQuery
The way to do this would be to use the nth-child(even) and (odd) rules. Unfortunately, and this should come as no surprise, IE6 does not support this. So you have a few options:
A) Use Javascript, with the obvious drawback of it not working for people with JS disabled:
var rows = document.getElementById('mytable').getElementsByTagName('tr');
for(var x = 0; x < rows.length; x++) {
rows[x].className = (x % 2 == 0) ? 'even' : 'odd';
}
If you expect to need more dynamic client side behavior on your application, you could then check a library like jQuery out. For just this it is unnecessary, but it makes working with Javascript across browsers a breeze. You would do the above with jQuery like it is shown in this answer.
Depending on your audience, Javascript may be perfectly acceptable. If it's not, then maybe you can...
B) Simplify your CSS and keep doing it manually. You can only mark the odd rows with a class, and then make the row default style the even styling. This will save you some work when moving things around.
C) Generate the rows programmatically. It is really archaic to be entering data like that into a fixed table if you're going to be updating it often enough that this is a problem. I'm obviously oblivious to your circumstance, but it should be trivial to do this in a loop somehow with a simple language like PHP.
D) Stop using a really outdated browser. :) (This is only half joking, as I'm sure its out of your control)
Give jQuery a try. Then you can simply do this:
$("#myTable tbody tr:visible:even",this).addClass("even");
$("#myTable tbody tr:visible:odd",this).addClass("odd");
The ":visible" selector isn't really necessary, but when you filter a table by making some rows hidden, the method will still work correctly.
The best approach would be the :nth-child() pseudo-class.
But unfortunately it’s not widely supported yet. So you’ll probably need to use JavaScript to do that.
Use jQuery's even/odd child implementation
Yes. You can use JavaScript to run through these elements and reset their classes according to even/odd.