Develop Reference

remove/replace class of a div within a specific table using jquery

I have the following markup and I am trying to remove all the div classes that have a class called "control".
<table role="presentation" data-name="tab_2_section_6" class="section">
<colgroup>
<col style="width:100%;">
<col>
</colgroup>
<tbody>
<tr role="group">
<td colspan="1" rowspan="1" role="radiogroup">
<div class="info">
<div class="validators"></div>
</div>
<div class="control">
<span>some text</span>
</div>
</td>
<td class="cell zero-cell"></td>
</tr>
<tr role="group">
<td colspan="1" rowspan="1" role="radiogroup">
<div class="info"></label>
<div class="validators"></div>
</div>
<div class="control">
<span>some text</span>
</div>
</td>
<td class="cell zero-cell"></td>
</tr>
</tbody>
I am using the following js snippet but the problem is it removes all the div classes that have "control" class assigned on the whole page.
var $unwantedclassess = $("td:has(div.control):has(div.control)");
if ($unwantedclassess) {
$unwantedclassess.find(".control").removeClass('control');
}
I just need it for the table "data-name="tab2_section_6". So I have tried like this as well but it fails and doesn't remove any class.
var $unwantedclassess = $("table[data-name='tab_2_section_6']td:has(div.control):has(div.control)");

Dropdown not work in responsive jquery datatable

I am using responsive jquery datatable.
Check this link
http://jsfiddle.net/82v4p7cL/1/
<div id="tblSkippedItems_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row"><div class="col-sm-12"><table id="tblSkippedItems" class="table table-striped table-bordered nowrap dataTable no-footer dtr-inline collapsed" cellspacing="0" width="100%" role="grid" aria-describedby="tblSkippedItems_info" style="width: 100%;">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 159px;" aria-label="Itemnumber: activate to sort column descending" aria-sort="ascending">Itemnumber</th><th class="sorting" tabindex="0" aria-controls="tblSkippedItems" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Location : activate to sort column ascending"></th></tr>
</thead>
<tbody>
<tr role="row" class="odd parent">
<td class="sorting_1" tabindex="0" style="">02-273-BU</td>
<td style="display: none;">
<select id="ddlTest" style="width: 300px">
</td>
</tr>
<tr class="child">
<td class="child" colspan="2">
<ul data-dtr-index="1">
<li data-dtr-index="2" data-dt-row="1" data-dt-column="2"><span class="dtr-title">Location <small>(Picking)</small></span> <span class="dtr-data"><span class="ClsLocName">N/A </span> <select id="ddlTest" style="width: 300px"></select></span></li>
</ul>
</td>
</tr>
</tbody>
</table></div></div>
</div>
I have dropdown column in jquery datatable.
In responsive mode, new tr is created with class "child".
And old tr is hide.
Both tr contain dropdown with same id.
When I try to add options to dropdown using jquery, no effect on dropdown.
var ddl = $('#DdlTest');
ddl.append($("<option></option>").val('0').html('Selectvalue'));

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
Try using a different id in your dropdown, you can only have 1 element with a specific id in every page, the script is working but it will append the options on the first element with that specific id.

There are several issues with your html and jquery select. first you didn't close the select tag try closing it and second ddlTest is not equal to DdlTest. you need to fix these issues then append your option.
<select id="ddlTest" style="width: 300px"></select>
JavaScript
var ddl = $('#ddlTest');
ddl.append($("<option value="0"></option>");

jQuery prevAll not working properly on table

I made many researches about that topic but not getting any success.
Issue
When i am trying to do rowspan based on custom attribute rowspanx at that time it is not working properly.
How i am making rowspan based on rowspanx?
So i am trying to find previous elements and next elements with prevAll and nextAll
if i found prevAll() > 1 than it should work but it is not working properly. it is working proper only once but not second time.
I m getting unexpected output. which is in code snippet.
My expected output like below.
EDIT
my logic is if current element td have rowspanx==1 so query should check for its all previous or next element have rowspanx == 2 if it is found true in any siblings elements than current td add rowspan = 2.
This is my logic but it is not working properly.
Need Help!
$('table.overview-table tr').each(function()
{
$($(this).find("*")).each(function(i)
{
if($(this).attr("rowspanx") == 1 && $(this).attr("rowspanx") != undefined && ($(this).prevAll().attr("rowspanx") > 1 || $(this).nextAll().attr("rowspanx") > 1)){
$(this).attr("rowspan","2");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100" border="1" class="table overview-table">
<tr style="display: table-row;">
<th scope="row" class="" rowspan="2">10:00</th>
<td class="orange white" rowspan="1" rowspanx="2" style="height: 20px;">test</td>
<td class="grey white" rowspan="1" rowspanx="2" style="height: 20px;">test</td>
<td class="orange" rowspan="1" rowspanx="1" style="height: 20px;"></td>
<td class="orange" rowspan="1" rowspanx="1" style="height: 20px;"></td>
</tr>
<tr style="display: table-row;">
<td class="orange fat" rowspan="1" rowspanx="1" style="height: 20px;"></td>
<td class="grey fat" rowspan="1" rowspanx="1" style="height: 20px;"></td>
</tr>
</table>

For the sake of simplicity the CSS classes are omitted:
<table width="100" border="1" id="table">
<tr>
<th rowspan="2">10:00</th>
<td rowspan="1" rowspanx="2">test</td>
<td rowspan="1" rowspanx="2">test</td>
<td rowspan="1" rowspanx="1"></td>
<td rowspan="1" rowspanx="1"></td>
</tr>
<tr>
<td rowspan="1" rowspanx="1"></td>
<td rowspan="1" rowspanx="1"></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#table tr td').each(function()
{
if($(this).attr("rowspanx")==1)
{
$(this).attr("rowspan","2");
}
});
</script>
Example of JSFiddle

Javascript: toggle class add or remove

What I am going to do is:
When i click on mails button, 1st table is going to appear and hide the second table and when subscribers button is pressed, 2nd table has to appear and hide the 1st table.
But I am facing bugs like when i pressed 2nd button it will not hide the 1st table
<script>
function toggle_display(id){
if(id=='mails'){
document.getElementById('mails').classList.remove('hidden');
document.getElementById('subscribers').classList.add('hidden');
}
if(id=='subscribers'){
document.getElementById('mails').classList.add('hidden');
document.getElementById('subscribers').classList.remove('hidden');
}
}</script>
<input type="button" class="btn" value="Mails"/>
<input type="button" class="btn" value="Subscribers"/>
<div class="row well well-lg hidden" id="mails">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">Name</th>
<th class="col-sm-2">Email</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-2">Subject</th>
<th class="col-sm-3">Message</th>
</tr>
</table>
</div>
<div class="row well well-lg hidden" id="subscribers">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">ID</th>
<th class="col-sm-5">Email</th>
<th class="col-sm-3">Action</th>
</tr>
</table>
</div>

Use this,, It is working...
<script>
function toggle_display(id){
if(id=='mails'){
document.getElementById('mails').style.display = 'block';
document.getElementById('subscribers').style.display = 'none';
}
if(id=='subscribers'){
document.getElementById('mails').style.display = 'none';
document.getElementById('subscribers').style.display = 'block';
}
}</script>
<input type="button" class="btn" onclick="toggle_display('mails');" value="Mails"/>
<input type="button" class="btn" value="Subscribers" onclick="toggle_display('subscribers');"/>
<div class="row well well-lg hidden" id="mails">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">Name</th>
<th class="col-sm-2">Email</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-2">Subject</th>
<th class="col-sm-3">Message</th>
</tr>
</table>
</div>
<div class="row well well-lg hidden" id="subscribers">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">ID</th>
<th class="col-sm-5">Email</th>
<th class="col-sm-3">Action</th>
</tr>
</table>
</div>

Remove mouse hover effect

When mouse hovers on a cell, suppose effect X takes place. How can I remove the hover effect?
JS Fiddle
HTML code:
<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
Update
I tried this CSS:
tbody tr:hover td.hasRowSpan {
background-color: none; /* or whatever color you want */
}
It doesn't work, unfortunately.

Remove the class "table-hover" from the table tag.
http://jsfiddle.net/ozr598jb/6/

You would have take Bootstrap hover rules and cancel background color with inherit (default, which is none):
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
background-color: inherit;
}
Of course it makes more sense to set some other hover style, other color, or border, etc. Otherwise don't use table-hover class on the table in the first place.
Demo: http://jsfiddle.net/ozr598jb/3/