Develop Reference

How to display none dynamic genrated class?

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.

Determine child-most element clicked on for Javascript event (DataTable related)

It might be that the way I'm approaching this just won't work, but to explain:
I have a DataTable with column sorting enabled via the default column header sorting graphic. In one of the column headers I also have a "select all" checkbox. The sorting and the "select all" both work, but I can't seem to prevent the sort operation from taking place when clicking on the select all checkbox.
The problem seems to be that the DataTables sort function is called ahead of the select all operation - in the capturing rather than bubbling up phase in what I understand to be the correct JS parlance.
I've been back and forward with this between different guides and forum posts, but am starting to wonder if it's going to work. I've added event.stopPropagation() to the select all routine, but because this is only called after the sort routine it seems of little use. I've also gone down the event.target route to conditionally only have the sort operation run if the clicked ID wasn't the checkbox, but for all I can tell the event object holds no reference to the original clicked element (does it?).
So, without editing the DataTables source (I'd really rather keep that off the shelf if at all possible), how do I have the sort routine run only when the column header itself is clicked, as opposed to a child element?
So I want something along the lines of:
function SelectAll(event)
{
event.stopPropagation(); //Doesn't help
...
}
$("#table_id").on("order.dt", function (event, settings)
{
if(event.not_clicked_select_all)
{
table_id.order();
}
});
How might this be done? Thanks.
Edit:
Jsfiddle

You can actually use a little css trickery with the z-index. Just put your inner div on a z-index that is higher than the cell.
th > div {
z-index:9998;
}
That will allow your checkbox (not the SELECT ALL label) to function the way you want it to. If you want to allow users to be able to click on the label too, then (if you are able) wrap the SELECT ALL in a label element and apply the same event.stopPropogation and my css technique to that label as well. Like this:
HTML
<th><div><input type='checkbox' id='select_all' onchange='SelectAll(event, "select_all", "include_")'><label for='select_all'> SELECT ALL</label></div><div>h</div></th>
CSS
th > div {
z-index:9998;
}
th > div > label {
z-index:9999;
}
Javscript
$("#select_all").click(function(event){event.stopPropagation()});
$("label[for='select_all']").click(function(event){event.stopPropagation()});
If you don't have access to the source and cannot wrap SELECT ALL inside a label element, there is probably some other css trick you can do. The key is to be able to target the label text individually and set it's z-index property.
Here is a working sample with both the checkbox AND the label:
https://jsfiddle.net/mspinks/y1g450ng/1/

Highlighting rows with DataTables (or other table/grid plug-ins)

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');
});

how to replace edited row in table

In this fiddle
There are two rows and each row have 2 bootstrap icons edit and delete.When edit icon is clicked then a bootstrap dialog box appears showing the existing column values,User can change the values and after clicking the save button the old values are replaced by the new one.I tried using
$Updaterow.remove();
$Updaterow.append('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
but this is not working.I have also tried with this
$Updaterow.replaceWith('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
In this way also the new row is not getting replaced.Can any body please tell me how to do this?

You are trying to replace TR with a TD. Try this
$Updaterow.replaceWith('<tr><td>'+ $('#editName').val()+'</td>'
+'<td>'+ $('#editEmail').val()+'</td>'
+'<td>'+ $('#editmobile').val()+'</td></tr>');
And the first one wont work since you are appending TD to a TR which is not in DOM any more.

JQuery Mobile Listview Background Color

How can I adjust the background color of a listview item in jquery mobile? Basically I'd like a user to click a item and have it and only it highlight, very simple, so I thought.
I thought this might achieve it (.groupList is an unordered list with that class). The event is fired but nothing changes.
$(".groupList li").bind('click', function() {
logger.debug("list row click");
$(this).closest("li").siblings().attr("data-theme","a");
$(this).parents("li").attr("data-theme","e");
});
I think the reason this is broken has to do with the fact I can't seem to set data-theme dynamically at all on listviews. I also can't use the background-color css with any luck.
It seems li tags can only have their data-theme set before appending to a list, once appended I can't get it to change.
The logic I've described here works on table rows just fine. Just bind the click event to tbody tr. The jquery functions closest, siblings and parent help us turn on/off the css for the background color. Again, not entirely sure why a listview breaks this.