need to hide dynamic class in a table row.
I want to know how I can hide the dynamic class which is showing on the table row.
Into other words need to hide a row from the table which contains this dynamic class. If I add rule to make display:none; when I put CSS into files it's still showing there also I have to use the jquery something like below
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".dos").hide();
});
</script>
but it's still showing row there .
please check screenshot
http://prntscr.com/eyl1h9
here is webiste https://silverforte.com
first add to cart then checkout , sign in as a customer then fill up the billing details click to continue then select shipping step will show order confirm and you will be find all there .
I hope there will be a solutions for that
Add CSS
.dos{
display:none;
}
or write your javascript code at the bottom without the document.ready
you can check priority of css selector using devTools of chrome,when $('.dos').hide() have no effect.
Related
I want to select a cell in a HTML table when clicking on it.
Currently I use this:
$("td").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
an my css is:
td:hover, td.selected {
background-color: #FF9900
}
td {padding: 5px;}
Hovering works just fine, but when I click on a cell it won't stay select.
How can I fix it
EDIT
You're right I shoud have give you more background info. I have to do a JavaFx programm for University. But JavaFX doesn't provide a table I wanted. So I decided get a WebView I this part of the application and make the table via a StringBuilder. In the following you see my current output (in the header is normaly the css and script link deleted it for this):
https://jsfiddle.net/5c861zrg/
So in this condition it won't work-
I was able to get your code working however it would not unselect multiple cells of the same column. So I just modified it to this. Give it a try. Leave your CSS the same.
$("td").click(function(){
$("td.selected").removeClass("selected");
$(this).addClass("selected");
});
Your problem is you have one more row siblings() is not working for another row
try do this
$("td").click(function() {
$(".selected").parent().find('td').removeClass("selected");
$(this).addClass("selected").siblings().removeClass("selected");
});
First you should find .selected class and you go to parent class and then you reach parent's td finally remove that you wanted class
Having problem using jquery library on getting this done. One problem that occur is that I cant check some checkbox on sticky columns, cant click and type on text fields, etc.
Im using this jQuery Stick Table Headers and checked the demo. Made some changes, added a checkbox on the 1st row 1st column. But the checkbox is unclickable.
sampel code > this.
this might help you!
Write this in css file
table.sticky-col{
opacity: 1 !important;
}
<div id="dropdown" class="dropdown-content">
Table
</div>
In my program I have a button, where a user will select a table and then that table will be displayed. Currently, when a second selection is made, it just adds a table beneath the first table. I would like to just display the current selection. I have tried this:
<div id="dropdown" class="dropdown-content" syle="clear:both;">
Table
</div>
And it did nothing. I also tried using a clearfix to no avail. Any help would be greatly appreciated.
Using style="display:none" on the table you wish to hide will work.
You could create a function that can easily turn the visibility of just one table on and off depending on the button you click but without your Javascript, I can't really help you.
Feel free to tag me or message me back when you have put in the Javascript and I can try to help you right a function that will do it for you :)
1- Give every table an ID :
<table id="table1">..</table>
<table id="table2">..</table>
2- In the click handler of your button use the id to hide the table, let's say you want to hide table1
document.getElementById("table1").style.display = "none"
You can also use JQuery functions : hide()
You can either use JQuery function .empty() to delete the previously created table, or use .hide() [to hide the table] and .show() [if u ever need to display the table again].
But,if you post your script,it'll be easier to give a correction,instead of a different solution.
So this one is baffling me and I'm hoping someone has encountered it. I've checked this site for answers but haven't found the correct answer.
I'm using Bootstrap 3.1.0, and I have a page that has tabbed content, each of which is holding dynamically generated tables. Within those tables, I have dynamically generated content that has a link - and on this link, I am attempting to generate a tooltip.
This makes the structure of the element as such:
-A Tab
--A Table
---A Row (tr)
----A Cell (td)
-----A link (a data-toggle="tooltip" id="{dynamically generated based on content}" class="specificClassName")
I've put the scripts before the closing body tag.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
});
I'd link all of the code but it's dynamically generated so I am not sure it would make sense. Ideally, I would like the tooltip to be placed to the right of the link, but I thought perhaps it was attaching itself to the wrong element as a "parent" and not showing up as a result, which is why I changed the placement to top.
Note: I've also tried the class name instead of data-toggle=tooltip, but this did not produce any different results.
The rest of the bootstrap items work- the tab functions correctly, the tables show up as desired. The tooltips are the only item that isn't functioning as intended.
Short Answer: I can't do what I'm trying to do. Or I could, but it's a bad idea. So I'm going to just write custom JS.
Long(er) answer: You have to include a title in a bootstrap tooltip, but the title is the tooltip content. My tooltip content is a dynamically generated div and div content, and I don't want that to be the value of the title property.
I want to create a css table that shall be dynamic.
what i want to say is that,
let the table has 4 headings,
S.no., Name, Age, Country
now each field will have a lot of data like
abc, 21, usa
def, 24, uk
ghj, 51, india
now what my intention is that, this table will be displayed on a webpage and will contain just fixed data.
When a user clicks on Name, the table shall be sorted by Name, if he clicks on Age, it shall be sorted by Age smaller to larger, same for country.
Can it be done guys? If yes, then how?
Thanks in advance for all your help.
As suggested by #Alvaro in comment, dataTable is your best and easiest option. You simply need to wrap your th in thead and other rows in tbody and you are good to go with only single line:
$("#<ID_OF_YOUR_TABLE").dataTable();
A working example is here
EDIT:- Using in your page.
Add jQuery script to your page.
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
Add DataTable CSS and Script to your page.
<link type="text/css" rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"></script>
Then anywhere at end of page (you may add in head tag but I prefer at end):
<script>
$(function(){
$("#<ID_OF_YOUR_TABLE>").dataTable();
});
</script>
EDIT 2 :- Hiding Footer Info
Footer info is wrapped in a div with class dataTables_info. So you can write the style definition for this class using display:none to hide it. I have updated the fiddle.
I think you need some JavaScript to do this (Bringing the sorted data with ajax)