I am having a table as shown below
On click of a button how to fecth the selected tr mobile number
<table class="table table-striped table-bordered table-hover table-full-width dataTable" id="sample_2" aria-describedby="sample_2_info">
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="vendorslist odd">
<td class=" "><label class="radio"><input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"></label></td>
<td class=" sorting_1"> VENDOR</td>
<td class=" ">5300085118</td>
<td class=" ">544444444</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">wer#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span></td>
</tr>
<tr class="vendorslist odd">
<td class=" "><label class="radio"><input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"></label></td>
<td class=" sorting_1"> VENDOR</td>
<td class=" ">5300085118</td>
<td class=" ">900000000</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">serr#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span></td>
</tr>
</tbody>
</table>
<button id="btnSave">Save Click</button>
This is my fiddle
https://jsfiddle.net/atg5m6ym/4123/
Could you please let me know how to fecth the mobile number of the selected table tr
Means for first i need the value 544444444 and in case of second i need 900000000
it would be easier with a class on the mobile td, but you could do:-
$(document).on('click', '#btnSave', function() {
var mobile = $('table :checked').closest('tr').find('td:eq(3)').text();
alert(mobile);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover table-full-width dataTable" id="sample_2" aria-describedby="sample_2_info">
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="vendorslist odd">
<td class=" ">
<label class="radio">
<input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1">
</label>
</td>
<td class=" sorting_1">VENDOR</td>
<td class=" ">12222</td>
<td class=" ">544444444</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">wer#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span>
</td>
</tr>
<tr class="vendorslist odd">
<td class=" ">
<label class="radio">
<input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1">
</label>
</td>
<td class=" sorting_1">VENDOR</td>
<td class=" ">12233</td>
<td class=" ">900000000</td>
<td class=" ">Restaurant</td>
<td class=" ">Restaurants</td>
<td class=" ">serr#gmail.com</td>
<td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span>
</td>
</tr>
</tbody>
</table>
<button id="btnSave">Save Click</button>
Through jQuery parents()
$(document).on('click', '#btnSave', function() {
alert($('.vendorslist input:checked').parents("tr").find('td').eq(3).text());
});
Related
Getting cell value using JQuery.
I have tried using the below code:
$("#table tr").each(function(){
var result = $(this).find("td:first").html();
alert(result);
});
But it returns string of all the first rows
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
I expect the values "jun 17", "Jul 17".... in that order, but the actual output is a string of the rows.
Get the values with text - and use .table not #table:
$(".table td").each(function() {
var result = $(this).text().trim();
if (result) console.log(result);
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
If you want to collect all the rows, use an array:
var rows = [...$(".table td")].map(e => $(e).text().trim()).filter(e => e);
console.log(rows);
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
You can use $(".table td") as selector to loop thru the tds and use text() instead of html() to get the texts
$(".table td").each(function() {
console.log($(this).text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td style="white-space: nowrap" class="form-label">
<span id="lblAppMonth1HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth2HeaderYr1" class="form-label-bold"></span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth3HeaderYr1" class="form-label-bold">Jun-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth4HeaderYr1" class="form-label-bold">Jul-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth5HeaderYr1" class="form-label-bold">Aug-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth6HeaderYr1" class="form-label-bold">Sep-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth7HeaderYr1" class="form-label-bold">Oct-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth8HeaderYr1" class="form-label-bold">Nov-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth9HeaderYr1" class="form-label-bold">Dec-17</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth10HeaderYr1" class="form-label-bold">Jan-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth11HeaderYr1" class="form-label-bold">Feb-18</span>
</td>
<td style="white-space: nowrap">
<span id="lblAppMonth12HeaderYr1" class="form-label-bold">Mar-18</span>
</td>
</tr>
</thead>
<tbody>
You should add id to the table in order to call it #table.Also you can get the span text with text() function.
$(document).ready(function(){
$("table tr").each(function(){
var result = $(this).find('span').text();
//there are span elements that are empty, so i skip these ones
if(result != ''){
alert(result);
}
});
});
I've got a Bootstrap table with dynamically loaded data that I have to filter via a dropdown and multiple inputs.
I've got the inputs working, but I can't seem to figure out how to make the dropdown play nice with the inputs.
When I remove the inputs, I can't seem to get the dropdown to filter.
I'm honestly not quite sure what I'm doing wrong, but I've spent so many hours on this and I'm not sure what else to do.
Below is my code:
<main role="main" class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<label class="table-label mb-3 w-100">
<select id="associationSelect" class="styled-select slate float-right mb-4 table-filter search-key select-table-filter" data-table="order-table" data-column="5">
<option selected="selected" value="">Search by local board</option>
<option value="">All Boards</option>
<option>Realtor Association Name</option>
<option>Business Association</option>
<option>Company Assn</option>
<option>Company Association</option>
</select>
</label>
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="search" id="firstNameInput" placeholder="First name" title="Type in a first name" data-column="0" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="officeNameInput" placeholder="Office name" title="Type in an office name" data-column="2" data-table="order-table">
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="cityTownInput" placeholder="City/Town" title="Type in a city/town name" data-column="3" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="lastNameInput" placeholder="Last name" title="Type in a last name" data-column="1" data-table="membersTable">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-12">
<table id="membersTable" class="table table-striped table-responsive-sm order-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Business Name</th>
<th scope="col">Address/City</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th class="d-none" scope="col">Association</th>
<th scope="col">Web</th>
</tr>
</thead>
<tbody>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">test</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">testington</td>
<td data-input="business-name">business company</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">business association</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Mister</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Testington</td>
<td data-input="business-name">company name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">Company Assn</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr id="noResult" class="">
<td> </td>
<td> </td>
<td colspan="" class="text-center">No Results Found</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main><!-- /.container -->
Below is my JS:
jQuery(document).ready(function(){
$(".search-key").on('change input', function() {
var emptyFields = $('.search-key').filter(function() {
return $.trim(this.value) === "";
});
if (emptyFields.length == $(".search-key").length) {
$('table tbody tr').each(function() {
$(this).show();
});
$('#noResult').hide();
} else {
var columnNumber = $(this).data('column');
var enteredValue = $(this).val();
//var enteredValue = $(this).val();
$('table tbody tr:visible').each(function() {
var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text();
var search = str.toLowerCase().indexOf(enteredValue.toLowerCase());
if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) {
$(this).hide();
$('#noResult').show();
} else {
$(this).show();
$('#noResult').hide();
}
});
}//else
});
});
As I said, the inputs work nicely, but I can't figure out how to get the dropdown to work with them. I've tried passing the value to a string and using indexOf to search it, but that doesn't work.
Any help is super appreciated.
Here is a fiddle I created for this:
https://jsfiddle.net/VicePresidentOfAwesome/tcbLqgxp/7/
Anyone with some concept of how I can get this working?
The problem is in this line
$('table tbody tr:visible').each(function() {
// logics here is correct
});
This is how it should work:
For all changed inputs, you need to go through each table row again (no matter it's visible or hidden from the previous search)
Try the following selector
// remove `:visible` selector
$('table tbody tr').each(function() {
// logics here is correct
});
Am having dynamically generated html table and am trying to bold last row of a table and also to remove hyperlink from it. I want to achieve this by identifier ID My_Table_1.
I searched for solution on the internet and on Stack Overflow but couldn't get any closer to what am looking for. Hence posting it with more details and specifics.
Below is the HTML:
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 1</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">1</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">1</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">0</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">1</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">0</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 2</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">161</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">3</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">82</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Grand Total</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">162</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">4</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">83</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
I tried below JavaScript just to try making last row bold, but its not working:
#My_Table_1:tr:last-child {
font-weight: bold;
}
Your css selector wasn't right (the : is redundant).
#My_Table_1 tr Selects all <tr> elements inside #My_Table_1
You can read in here to learn how to select elements in the right way.
#My_Table_1 tr:last-child { font-weight: bold; }
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 1</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">1</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">1</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">0</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">1</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">0</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 2</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">161</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">3</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">82</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Grand Total</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">162</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">4</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">83</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
Remove colon (:) before the tr in the selector. To remove the underline you have to target the a inside the last-child and set text-decoration and pointer-events property to none.
Try the following:
#My_Table_1 tr:last-child {
font-weight: bold;
}
#My_Table_1 tr:last-child a{
text-decoration: none;
pointer-events: none;
}
<table class="a-IRR-table" id="My_Table_1">
<tbody>
<tr>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251039963326345" role="presentation">Manager</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251173536326346" role="presentation">Col 1</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251234003326347" role="presentation">Col 2</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251312338326348" role="presentation">Col 3</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728589955552718" role="presentation">Col 4</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="2752728614749552719" role="presentation">Col 5</a>
<div class="t-fht-cell"></div>
</th>
<th class="a-IRR-header">
<a class="a-IRR-headerLink" data-column="1971251464506326349" role="presentation">Grand Total</a>
<div class="t-fht-cell"></div>
</th>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 1</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">1</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">1</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">0</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">1</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">0</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">3</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Manager 2</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">161</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">3</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">82</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1646</td>
</tr>
<tr>
<td class=" u-tL" headers="C1971251039963326345" aria-labelledby="C1971251039963326345">Grand Total</td>
<td class=" u-tC" headers="C1971251173536326346" aria-labelledby="C1971251173536326346">162</td>
<td class=" u-tC" headers="C1971251234003326347" aria-labelledby="C1971251234003326347">4</td>
<td class=" u-tC" headers="C1971251312338326348" aria-labelledby="C1971251312338326348">108</td>
<td class=" u-tC" headers="C2752728589955552718" aria-labelledby="C2752728589955552718">83</td>
<td class=" u-tC" headers="C2752728614749552719" aria-labelledby="C2752728614749552719">1292</td>
<td class=" u-tC" headers="C1971251464506326349" aria-labelledby="C1971251464506326349">1649</td>
</tr>
</tbody>
</table>
I'm trying to remove from 2 buttons events a class.
What I want to achieve is that when I press the button the class 'success' will be removed.
I tried to do so in the next 2 buttons:
// Button handlers
$('#study_acrf').click(function() {
_this.start();
$('#soa_table').removeClass('success'); //success
});
$('#export_acrf').click(function() {
$('#table_data').val($("<div />")
.append($("#soa_table").clone()).html());
$('#preview_form').submit();
window.open('/study_versions/' + studyVersionId + '/export?study_version[export_type]=acrf');
});
In this what happening is that on button pressing I'm showing a view where there is a table. This table is cloned from another view where you can select one column and that is the class 'success'. This class makes the cell header of the columns green and I want to rid off it when the table is in the new view. I tried various stuff but I have no idea how to solve this issue. In the screenshot shared you can see the table with those greens which I don't want to see anymore.
The HTML of the table where this happening:
<table id="soa_table" class="table table-striped table-bordered table-condensed soa-table">
<thead>
<tr>
<th>SoA</th>
<th id="6" class="soa-column text-center">V1</th>
<th id="102" class="soa-column text-center success">V2</th>
<th id="103" class="soa-column text-center">V3</th>
<th id="104" class="soa-column text-center">V4</th>
<th id="105" class="soa-column text-center">V5</th>
<th id="106" class="soa-column text-center">V6</th>
<th id="107" class="soa-column text-center">V7</th>
<th id="108" class="soa-column text-center">V8</th>
<th id="109" class="soa-column text-center">V9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="soa-row" id="2">Demographics (Pilot)</td>
<td class="soa-element text-center" form_id="2" visit_id="6" id="18">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="2" visit_id="102" id="0"> </td>
<td class="soa-element text-center" form_id="2" visit_id="103" id="21">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="2" visit_id="104" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="105" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="106" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="107" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="108" id="0"> </td>
<td class="soa-element" form_id="2" visit_id="109" id="0"> </td>
</tr>
<tr>
<td class="soa-row success" id="6">Education (Pilot)</td>
<td class="soa-element" form_id="6" visit_id="6" id="0"> </td>
<td class="soa-element text-center" form_id="6" visit_id="102" id="25">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="6" visit_id="103" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="104" id="0"> </td>
<td class="soa-element text-center" form_id="6" visit_id="105" id="24">
<span class="glyphicon glyphicon-ok text-success"></span>
</td>
<td class="soa-element" form_id="6" visit_id="106" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="107" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="108" id="0"> </td>
<td class="soa-element" form_id="6" visit_id="109" id="0"> </td>
</tr>
</tbody>
I fixed my own issues just adding more selection to the tag like this:
$('#soa_table thead tr th, #soa_table tbody tr td').removeClass('success');
I want to find the td position and apply the color for tr. For example the class (jqx-grid-group-expand or jqx-grid-group-collapse) contains in first position of the td in tr tag(see : row0grid) then the row color is red. the same class contain in the second position of the td (see : row1grid) then the row color is blue. How to I apply the color. Please help me. Am new of this field.
<table id="contenttablegrid" border="1">
<tr id="row0grid">
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned jqx-grid-group-expand jqx-icon-arrow-down">
</td>
<td class="jqx-grid-group-cell">
Department: Dept1
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
99
</td>
<td class=" jqx-grid-group-cell">
135.6
</td>
</tr>
<tr id="row1grid">
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
</td>
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned jqx-grid-group-expand jqx-icon-arrow-down">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
Project: Project1
</td>
<td class=" jqx-grid-group-cell">
70.7
</td>
<td class=" jqx-grid-group-cell">
100.45
</td>
</tr>
<tr id="row2grid">
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
</td>
<td class=" jqx-grid-group-cell jqx-grid-cell-pinned">
</td>
<td class="jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell">
</td>
<td class=" jqx-grid-group-cell" title="Balaji">
<span style="color: red; font-weight: bold;">Super</span><span style="color: Blue;
font-style: italic;"> Balaji </span>
</td>
<td class=" jqx-grid-group-cell" title="25.30">
<td>
25.30
</td>
</td>
<td class=" jqx-grid-group-cell" title="45.45">
<td style="text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; text-align: center;
margin-top: 4px;">
45.45
</td>
</td>
</tr>
</table>
You can use has() to find the <tr> with matching elements as follows:
$("#contenttablegrid tr").
has("td.jqx-grid-group-expand:first-child, td.jqx-grid-group-collapse:first-child")
.addClass("red")
.end()
.has("td.jqx-grid-group-expand:nth-child(2), td.jqx-grid-group-collapse:nth-child(2)")
.addClass("blue");
Demo
You can use this:
$('.jqx-grid-group-expand, .jqx-grid-group-collapse').each(function(){
var color = $(this).index() === 0 ? 'red' : 'blue';
$(this).closest('tr').css('background', color);
});
Demo