<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.
Related
back again! been a while.
So this is my question.
I have a datatable set up that gets the information from the database and shows this in a modal (bootstrap4).
That works fine by the way, but now I wan't to add a dropdown option.
This dropdown needs to have information that is stored in the database (just one table with all the rows).
success:function(data){
$('#Modal').modal('show');
$('#Id').val(data.id);
$('.number').html("<select><option>".val(data.number)"</option></select>");
$('#skills').val(data.skills);
$('.modal-title').html("<i class='edit'></i> Edit ");
$('#action').val('Data');
$('#save').val('Save');
}
as you can see I tried to do this little trick but sadly it didn't take so I was wondering if something like this is even possible?
Thanks so much for the help/info.
Assuming that your modal already contains a select box in a .number div with several options in it then the following would add the extra option into it, generated from the data object:
$('.number select').append(`<option value="${data.number}">${data.number}"</option>`);
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.
There's an example in DataTables for highlighting rows on hover:
http://datatables.net/examples/advanced_init/highlight.html
However, I'm looking for something a bit different. I'd like the highlight to be trigged when users click on words outside the table. For example, in the above link, I'd like row #2 to be highlighted when a user click on "visibility" in the text above the table (so it's kind of a hyperlink).
I'm assuming I can find an highlighting plug-in that maybe can do what I need. But before
I got there, is there any easy way to do this with DateTables or other table/grid plug-ins?
Thank you!
Here is an example of highlight on click.
It also has an example of deleting a row on click from a link outside the table.
EDIT: This example won't do exacly what you want, but it get's you most of the way there. I have retrofitted the example in this fiddle to do what you want. Here is the "click link to highlight row" part of it:
$("#rowHighlightLink").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$('#example tbody tr').eq(1).addClass('row_selected');
});
I dynamically create an html table and one of the cells in each row stores a button that I want to delete that row when pressed. What are my options in knowing what table row to delete from the delete button pressed?
Am I somehow able to get the row that the button is in? Maybe then inside the click I could use the events 'this' property to get the button and then find out which cell it's in, and from there which row that cell is in? Not sure how I'd go about doing that though.
if you are using jQuery this will be a sample code on how you can achieve this.
$('#my_table_id').on('click', 'button', function() {
$(this).closest('tr').remove();
});
hope this helps, best!
Put this in the button's onclick handler:
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
Can be done with native JS, but here is a jQuery solution. Be sure to clone(true) to ensure your events are preserved.
<tr><td>hello</td><td><span class="deleteMe">Delete</td></tr>
$(".deleteMe").click(function(){$(this).parent().parent().remove();});
I have a very large html table that is similar to the following:
<table>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
<td>value4</td>
</tr>
</table>
For each value I need to have a dropdown, where a user can click to change the value. This would trigger an ajax function. What would be the best way to do this? A dropdown in each ? One dropdown that changes position? How should i go about adding this?
This solution changes the cell to a dropdown when clicked, and back to a cell when a value is selected, just in case this was desired effect.
Something similar to this, I would assume. :) I used jQuery. :)
$("tr").each(function(){
$("td").each(function(){
var before = $(this).text();
$(this).html("<select><option>"+before+"</option></select>");
});
});
jsFiddle Example
Some of this depends on the experience you want for the user, but I would lean towards putting a select element in each table cell. You can then have the select hidden until the user selects one of the values to change, or you can have the select elements visible the entire time. This is easier because you can put the values into the select box before the browser renders the page. If this is not usable, for example, if the browser has trouble rendering the page because of the size of the markup, then you could move to using a single select element.
If you use a single select box, that would require you to move it around to the correct cell, and also determine how to get the possible values into the select box. You could use a data attribute on your td tags to store the data, or you could make an ajax call. But that could be chatty if you go back to the server each time a cell needs to be edited. Basically this would be the harder option to get right.
Start with the simple way (select in each td). And if that proves to be problematic, move on to the harder one. That is what I would do.
Alright, I got it working. This is an alternative to my other answer.
This gets each tr to be a dropdown and the tds are the options. I used jQuery.
$("tr").each(function(i){
$("td").each(function(){
$(this).replaceWith("<option>"+$(this).text()+"</option>");
});
$(this).replaceWith("<select>"+$(this).html()+"</select>");
});
Updated jsFiddle Example