I have a table which I search (show/hide rows) using quicksearch jQuery plugin. In same table I have to show/hide all the rows where checkbox (first column in table) is checked, if user click toggle row button ( button is outside table).
When I search data in table the hidden rows (checkbox checked) become visible. How can I achieve both functionality.
Where all the hidden rows (where checkbox is checked and user has clicked 'toggle rows') will remain hidden when user search data in table and vice versa.
Following is my jQuery:
$(function () {
$('input#gridSearch').quicksearch('#<%=gvActivities.ClientID %> tbody tr');
$('.showhiderows').click(function () {
$('#<%=gvActivities.ClientID %>').find("input[type=checkbox]:checked").closest('tr').toggle();
});
});
Checkbox is the first column in GridView.
Button to show/hide selected rows:
<input type="button" id="btnShowHide" class="showhiderows" value="Toggle Selected Rows" />
Table Structure, Just header and first row:
<table class="gvv1" id="MainContent_gvActivities">
<tr style="background-color: buttonface;">
<th scope="col">
</th>
<th scope="col">
Cluster
</th>
<th scope="col">
Activity
</th>
<th scope="col">
Data
</th>
<th scope="col">
Target
</th>
<th scope="col">
Achieved
</th>
</tr>
<tr>
<td>
<input id="longIdGeneratedByCode" type="checkbox"/>
</td>
<td style="width: 50px;">
ER.
</td>
<td style="width: 250px;">
Establishment
</td>
<td style="width: 460px;">
Number of
</td>
<td style="width: 70px;">
Text
</td>
<td style="width: 70px;">
Text2
</td>
</tr>
</table>
I think I can solve it,
$("#showhidetr").on("click", function(){
if($(this).is(':checked')){
$("#myTable").find("input[type='checkbox']").each(function(){
if($(this).is(':checked')){
$(this).parent().parent().hide();
}
})
} else {
$("#myTable").find("input[type='checkbox']").each(function(){
if($(this).is(':checked')){
$(this).parent().parent().show();
}
})
}
})
<input type='checkbox' id="showhidetr">
<table id="myTable">
<tr>
<td><input type='checkbox'></td>
<td>Mary</td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>John</td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>Michael</td>
</tr>
</table>
When you click showhidetr checkbox, the script looks for a checked checkbox in the table and hide its tr.
Related
I'm trying to hide whole column with all elements in that column when the checkbox is clicked. I'm wondering what's the best approach to solve that using Angular.
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" >
<td>{{user.Name}}</td>
<td>{{user.Email}}</td>
<td>{{user.Date}}</td>
</tr>
</tbody>
</table>
Above the table I have 3 checkboxes:
Name | Email | Date
I want to press one of them and then whole column disappears including <th> element and <td> element.
What could be the best idea for this problem?
To hide columns when a checkbox is selected.
In your .ts create 3 variables set to true for each column.
showName = true;
showEmail = true;
showDate = true;
in your respective checkboxes you need to add checked and change calls for each and match it to the 3 booleans above:
<input type="checkbox" [checked]="!showName" (change)="showName=!showName"/>
<input type="checkbox" [checked]="!showEmail" (change)="showEmail=!showEmail"/>
<input type="checkbox" [checked]="!showDate " (change)="showDate =!showDate "/>
And then add *ngIf in each related th and td for example for the name td and th:
<th scope="col" *ngIf="showName">Name</th>
<td *ngIf="showName">{{user.Name}}</td>
declare class
export class ColumnVisible{
public nameVisible:boolean=true;
public emailVisible:boolean=true;
public dateVisible:boolean=true;
constructor(){}
}
call it in component
columnVisible:ColumnVisible;
in costructor initialize it with
this.columnVisible=new ColumnVisible();
inhtml write as class and give click event
<input [(ngModel)]="columnVisible.nameVisible" type="checkbox"(change)="columnVisible.nameVisible=!columnVisible.nameVisible" />
<input [(ngModel)]="columnVisible.emailVisible" type="checkbox"(change)="columnVisible.emailVisible=!columnVisible.emailVisible" />
<input [(ngModel)]="columnVisible.dateVisible" type="checkbox"(change)="columnVisible.dateVisible=!columnVisible.dateVisible" />
<table class="table">
<thead>
<tr>
<th ngIf="columnVisible.nameVisible" scope="col">Name</th>
<th ngIf="columnVisible.emailVisible" scope="col">Email</th>
<th ngIf="columnVisible.dateVisible" scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of Items" class="{{user.IsShown}}" >
<td ngIf="columnVisible.nameVisible" >{{user.Name}}</td>
<td ngIf="columnVisible.emailVisible">{{user.Email}}</td>
<td ngIf="columnVisible.dateVisible">{{user.Date}}</td>
</tr>
</tbody>
</table>
Here's a little bit of code. stackblitz. You just need three different models for different checkboxes or use 1 property but with different types
I have a table which have some fields like Service , amount , tax , action , I just want that if I tick on checkbox in that row , I want the table service data like Subscription charges should be added in an input and when I tick on another rows checkbox this table data also should add in that input with a comma like subscription charges, registration fees , also when I untick that row checkbox , that table data like subscription charges, registration fees also should be removed in input
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">
One way of doing it using jQuery is to first make sure we notice if a checkbox is changed, then go to the parent row, and find the first TD which should contain what you're out after. After all that, get the "target" element (ie. the input box at the bottom) and set it's value.
$("input[type=checkbox]").on("change", function() {
var value = $(this).parent().parent().find("td:first-child").text();
var target = $("input[name=services]");
target.val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
<tr>
<td>
<span>Subscription Charges</span>
</td>
<td>
<span>500.00</span>
</td>
<td>
<span>90.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
<tr>
<td>
<span>registration fees</span>
</td>
<td>
<span>200.00</span>
</td>
<td>
<span>80.00</span>
</td>
<td>
<input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00" />
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" rules="all" border="1" id="table2" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Service </th>
<th scope="col">Amount</th>
<th scope="col">tax</th>
<th scope="col">Action</th>
</tr>
</tbody>
</table>
<input type="text" name="services">
I have quite big table with many columns. Many columns have attribute "ng-show". Also i have created a functionality which hides or displays some table columns (with "ng-show").
When i trying to apply table columns visibility change ir takes 2-3 seconds for angular to update the table. Is it possible to add loading spinner on the table while it happens?
Simplified table structure:
<table class="classesList" id="tableId">
<thead>
<tr>
<th ng-show="tableColumns[0].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[1].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[2].show" >
<span>Header1</span>
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-show="tableColumns[0].show">
<span>Data1</span>
</td>
<td ng-show="tableColumns[1].show">
<span>Data2</span>
</td>
<td ng-show="tableColumns[2].show">
<span>Data3</span>
</td>
...
</tr>
</tbody>
I have a table I'm wanting to check the checkbox & add a class to a div when the user clicks on the table row, I can't get it to add the class.
can anyone show me where i'm going wrong.
HTML BELOW:
<div class="widgit">
<table id="QR_table">
<thead>
<tr class="QR_table-row">
<th class="qr_action">Checkbox</th>
<th class="qr_action">Action</th>
<th class="qr_from">FROM</th>
<th class="qr_to">TO</th>
<th class="qr_trans">Transport</th>
</tr>
</thead>
<tbody>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">4</td>
<td class="qr_to">21</td>
<td class="qr_trans">WC</td>
</tr>
<tr class="QR-row">
<td class="checkbox">
<input class="modal-state" id="modal-1" type="checkbox" />
</td>
<td class="qr_action">PT</td>
<td class="qr_from">8</td>
<td class="qr_to">2</td>
<td class="qr_trans">T</td>
</tr>
</tbody>
JQUERY BLOW:
$(function() {
$(".QR-row").click(function() {
var $chk = $(this).find('input[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));
if($($chk).is(':checked')){
$(".widgit").addClass("modal-open");
} else {
$(".widgit").removeClass("modal-open");
}
});
});
JSFIDDLE
From my point of View everything works fine.
In your fiddle the only div that you have is around your table and it seems to be the one you try to give a class.
<div class="widgit">
<table id="QR_table">
And everything works fine. Fiddle
If you want it to do something else then you have to be a bit more specific about what you try to achive
I have a simple table to simulate a Gantt chart. The idea is that each TD clicking trigger a sum of values stored in an hidden input text (an array of values), available in a TH (first son of TR tag). The row sum of these values, is shown on a final TD.
Next, the code table:
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr class="encabezado">
<th rowspan="2" scope="col" width="15%">Area</th>
<th colspan="7" scope="col">Month</th>
</tr>
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr class="encabezado">
<th scope="row">Total</th>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia">...</td>
<td class="total_dia"> </td>
</tr>
</tbody>
</table>
The array of values works as follows:
array [0]: Off;
array [1]: preoperative;
array [2]: Operating.
This is the jQuery code I use to differentiate cells that are pre-operational and operational. If a cell is inactive, the area is off:
$(document).ready(function() {
$('td.gantt').click(function() {
$(this).toggleClass('preop');
});
$('td.gantt').dblclick(function() {
$(this).toggleClass('operating');
});
});
Inactive TD always sum to the total. What I want to do? Simple:
1. That jQuery always sum TH input value[0], if the TD is not clicked (inactive).
2. When I click, or double click, a TD.gantt jQuery fetch the TH input value[1], and add it to the total.
If anyone can help with the whole problem, o a parcial, I would really appreciate.
Mixing "click" and "dblclick" is not going to work, at least not reliably. I suggest you re-work the interaction so that "click" cycles through your three different states.
To do the math you want to do (and I don't fully understand that), the basic problem is to get the <th> contents that correspond to the column that each clicked <td> is in. To get that, you'll have to find which child the <td> is of its parent <tr>, and then that will allow you to find the <th> (with the ":nth-child" selector, or the "eq" filter).