Develop Reference

Angular - hide/show column in a table when checkbox is selected

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

AspNet Two Tables on a View

I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>

You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx

footable js removes all form elements in the table

I have implemented a responsive table with the help of footable jquery library. Now i have placed input tags, select box in it. Footable js removes all these tags and make it an empty <td>.
<table id="accordion-example-1" class="table" data-paging="true" data-filtering="false" data-sorting="false">
<thead>
<tr>
<th></th>
<th data-breakpoints="xs">Date Created</th>
<th>Source</th>
<th>Type</th>
<th data-breakpoints="xs">Status</th>
<th data-breakpoints="xs sm"> </th>
<th data-breakpoints="xs sm md" > </th>
<th data-breakpoints="xs sm md"> </th>
</tr>
</thead>
<tbody>
<tr data-expanded="true">
<td></td>
<td>6/11/16</td>
<td>Mr. Cooper - Request Info</td>
<td>Buying</td>
<td>
<select class="nobrdr">
<option>Offer</option>
</select>
</td>
<td><input type="text" class="nobrdr" placeholder="Value"/></td>
<td><input type="text" class="nobrdr" placeholder="Date" /></td>
<td><button class="nobrdr m-l-1" type="button" ><b>+ Add</b></button><br>Forms/Docs</td>
</tr>
</tbody>
</table>
jquery function :
$(function($){
$('#accordion-example-1,#accordion-example-2').footable({
});
});

You need to change the data type of the column(s) where the form elements are to "html", otherwise FooTable assumes the column contains only text and formats it as such - i.e. it will strip out all HTML markup from the cell contents, and not just form elements.
For example in your case:
<th data-type="html" data-breakpoints="xs">Status</th>
will tell it to respect HTML markup within any cells in the Status column.
The possible column types supported are "text", "number", "html" and "date". "text" is the default if no type is specified.
For more detailed discussion I suggest you read the guide at http://fooplugins.github.io/FooTable/docs/getting-started.html and find the "Column options" section.

CSS div tag inherit dimensions from table rows

I am not such an expert in CSS;
My question is: can a div tag inherit dimensions from a table rows based on table row's class or id?
For example: We have a table with a couple of rows, but we don't know exact size of one table row, but we know the id/class of the rows. And by absolute positioning a div tag on table based on id/class to fill up 2 rows from start to end!
Can anyone point me to some addresses or to give me a tip code?
<table>
<col width="9%">
<thead>
<tr>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2"> </th>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<th rowspan="2"> </th>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
I search for something like this:

You can take the width and height of parent td and then set them to the div using javascript.You want something like this?
https://jsfiddle.net/toLacq32/1/
$(document).ready(function(){
tdWidth = $('#inner-div').closest('td').width();
tdHeight = $('#inner-div').closest('td').height();
$("#inner-div").width( tdWidth ).height(tdHeight);
});

Datatables fix second row

I started using datatables for my tables.
I now have a table with customers.
The first row is the table header. The second row is for a button to add a new customer.
The rest of the rows is the list of customers.
I want datatables to sort everything but not the "new customer" row. How to lock this row / exclude it from sorting?
Tried this:
<table class="muitable" border="0" cellpadding="0" cellspacing="3" id="customertable">
<thead>
<tr>
<th>
</th>
<th>
</th>
<th class="muitable bluehover hand" >
Name
</th>
<th class="muitable bluehover hand" >
Created
</th>
<th class="muitable bluehover hand" >
Status
</th>
</tr>
<tr>
<th width="16">
</th>
<th class="muitable hovernextcell" onclick="newcustomer()">
<img src="/common/images/plus.png" width="16" height="16" class="hand">
</th>
<th class="muitable bluecell">
New customer
</th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
--contents--
</tbody>
</table>
The problem that arises now is that the "sorting buttons" are all over the place. When there is a value in the cell on the second row, this becomes the button, if theres not, it uses the first row for making a sorting button.
How to tell datatables to leave the second th row alone and just use the first row as headers?

You can put the "Add Customer" button in the header. Something like this:
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
<tr>
<th colspan="3">
<button>Add Customer</button>
</th>
</tr>
</thead>
Now dataTables will not sort the row.
jsFiddle: http://jsfiddle.net/Fd3ED/

Fixed it by by using two header rows and using the option http://datatables.net/ref#bSortCellsTop