I have a dashboard which is contain some information from firebase
and i have a button Like this (more)
and when i click on it, it doesn't work or redirect me to my specific page
this my code in html file
<table class="table table-inverse">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email </th>
<th scope="col">Country</th>
<th scope="col">City</th>
<th scope="col">Salary</th>
<th scope="col">ID</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let item of employees">
<th >{{item.firstName}}</th>
<th >{{item.lastName}}</th>
<th >{{item.email}}</th>
<th >{{item.country}}</th>
<th >{{item.city}}</th>
<th >{{item.salary}}</th>
<th >{{item.key}}</th>
<th> <a href="" [routerLink]="['/employee/employee/]" class="btn btn-primary">more <i class="fa fa-info-circle" ></i>
</a></th>
</tr>
</tbody>
</table>
i have import this in the app.module.ts
import { RouterModule, Routes} from '#angular/router';
And also i added this in the route config
{path:'employee/:id',component:EmployeeInfoComponent},
[routerLink]="['/employee/employee/]" your routerLink not match with your routes it should be like {path:'employee/:id',component:EmployeeInfoComponent}, . And you missed close single quotes.
Try to this [routerLink]="['/employee/, item.key]”
Related
I want CSS or html to break the columns in a new page lets say after 5th column or any column I want.
I want a table in three pages with page-1 having col-1 to col-5, page-2 with col-6 to col-10 and page-3 with col-11 to col-15
<table class="table">
<thead style="color:#ceb03d">
<tr>
<th id="column_1">column1</th>
<th id="column_2">column2</th>
<th id="column_3">column3</th>
<th id="column_4">column4</th>
<th id="column_5">column5</th>
<th id="column_6">column6</th>
<th id="column_7">column7</th>
<th id="column_8">column8</th>
<th id="column_9">column9</th>
<th id="column_10">column10</th>
<th id="column_11">column11</th>
<th id="column_12">column12</th>
<th id="column_13">column13</th>
<th id="column_14">column14</th>
<th id="column_15">column15</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in model.items"> //The table contains several rows.
<td>result1</td>
<td>result2</td>
<td>result3</td>
<td>result4</td>
<td>result5</td>
<td>result6</td>
<td>result7</td>
<td>result8</td>
<td>result9</td>
<td>result10</td>
<td>result11</td>
<td>result12</td>
<td>result13</td>
<td>result14</td>
<td>result15</td>
</tr>
</tbody>
</table>
I want to hide some of the columns in the table below. It is from a wordpress plugin so the ids and classes are predefined. I hope I can solve it with css fx: display:none, but I cant seem to get it to work.
<table cellspacing="0" class="wp-list-table widefat fixed brugere">
<thead>
<tr>
<th class="manage-column column-company_name sortable asc" id="company_name" scope="col" style="">
<span>Virksomhed</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-CVR._Nr." id="CVR._Nr." scope="col" style="">CVR. Nr.</th>
<th class="manage-column column-arbejdsområde" id="arbejdsområde" scope="col" style="">Arbejdsområde</th>
<th class="manage-column column-fagområde" id="fagområde" scope="col" style="">Fagområde</th>
<th class="manage-column column-address_zipcode sortable asc" id="address_zipcode" scope="col" style="">
<span>Postnummer</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-address_city sortable asc" id="address_city" scope="col" style="">
<span>By</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-tlf._nr." id="tlf._nr." scope="col" style="">Tlf. Nr.</th>
<th class="manage-column column-email sortable asc" id="email" scope="col" style="">
<span>Email</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-view" id="view" scope="col" style="">Se mere</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="manage-column column-company_name sortable asc" scope="col" style="">
<span>Virksomhed</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-CVR._Nr." scope="col" style="">CVR. Nr.</th>
<th class="manage-column column-arbejdsområde" scope="col" style="">Arbejdsområde</th>
<th class="manage-column column-fagområde" scope="col" style="">Fagområde</th>
<th class="manage-column column-address_zipcode sortable asc" scope="col" style="">
<span>Postnummer</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-address_city sortable asc" scope="col" style="">
<span>By</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-tlf._nr." scope="col" style="">Tlf. Nr.</th>
<th class="manage-column column-email sortable asc" scope="col" style="">
<span>Email</span><span class="sorting-indicator"></span>
</th>
<th class="manage-column column-view" scope="col" style="">Se mere</th>
</tr>
</tfoot>
<tbody class="list:bruger" id="the-list">
<tr class="alternate">
<td class="company_name column-company_name">DHV</td>
<td class="CVR._Nr. column-CVR._Nr.">20891940</td>
<td class="arbejdsområde column-arbejdsområde">Bornholm, Lolland og Falster, Nordsjælland</td>
<td class="fagområde column-fagområde">Gardin, Gulve, fremstilling</td>
<td class="address_zipcode column-address_zipcode">2300</td>
<td class="address_city column-address_city">Kbh S</td>
<td class="tlf._nr. column-tlf._nr."></td>
<td class="email column-email">test#hotmail.com</td>
<td class="view column-view">
Klik her
</td>
</tr>
</tbody>
</table>
You can use the nth-child selector in CSS to hide the columns you need. But in that case you need to hide that same th as well.
CSS:
table tr th:nth-child(1), table tr td:nth-child(1){
display:none;// It will hide the first column of the table
}
Also check this for better understanding https://css-tricks.com/how-nth-child-works/
Try to add in a separate .CSS (and call this .CSS in last in your head) and for example try
#company_name {
display: none; //If it doesn't work try visibility: hidden;
}
from w3school
Question
When I click the table header row, I would like a generic function to get the id of the clicked <th> element, so I don't have to create a separate function for each header item.
I'm using jQuery, and have the following code:
HTML
<div id="title">
<table class="policies sortable">
<thead id="h-th">
<tr id="h-tr">
<th width="3%" id="h-client">Client</th>
<th width="7%" id="h-company-code">Company Code</th>
<th width="9%" id="h-unique-reference">Unique Reference</th>
<th width="8%" id="h-doc-date">Document Date</th>
<th width="8%" id="h-post-date">Posting Date</th>
<th width="7%" id="h-doc-type">Document Type</th>
<th width="5%" id="h-trip-id">Trip Id</th>
<th width="7%" id="h-ticket-no">Ticket Number</th>
<th width="6%" id="h-calc-tax">Calculate Tax</th>
<th width="15%" id="h-passenger-name">Passenger Name</th>
<th width="4%" id="h-error">Valid</th>
<th width="4%" id="h-processed">Processed</th>
<th width="4%" id="h-payment">Payment</th>
<th width="11%" id="h-updated">Updated</th>
</tr>
</thead>
</table>
</div>
JavaScript
$("#h-tr").click(function(item) {
console.log(item);
// get the id of the clicked <th>
});
if you include the th to the selector then you can access the id using $(this)
$("#h-tr th").click(function(item) {
console.log($(this).prop('id'));
});
With plain Vanilla JS
You can call querySelectorAll() on all th elements and use a loop
to iterate and console.log() attributes once the EventListener is
triggered by the element clicked.
document.querySelectorAll('th').forEach(element => {
element.addEventListener('click', () => {
console.log(element.getAttribute('id'))
})
})
th{cursor:pointer}
<div id="title">
<table class="policies sortable">
<thead id="h-th">
<tr id="h-tr">
<th width="3%" id="h-client">Client</th>
<th width="7%" id="h-company-code">Company Code</th>
<th width="9%" id="h-unique-reference">Unique Reference</th>
<th width="8%" id="h-doc-date">Document Date</th>
<th width="8%" id="h-post-date">Posting Date</th>
<th width="7%" id="h-doc-type">Document Type</th>
<th width="5%" id="h-trip-id">Trip Id</th>
<th width="7%" id="h-ticket-no">Ticket Number</th>
<th width="6%" id="h-calc-tax">Calculate Tax</th>
<th width="15%" id="h-passenger-name">Passenger Name</th>
<th width="4%" id="h-error">Valid</th>
<th width="4%" id="h-processed">Processed</th>
<th width="4%" id="h-payment">Payment</th>
<th width="11%" id="h-updated">Updated</th>
</tr>
</thead>
</table>
</div>
I am generating a html table serverside with Java and sending it as a JSON to the client. So my response is a plain text looking like this:
<table class="table"></table><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody>
My jQuery Script looks like this
if(reply.type === "highscores") {
var el = reply.value.replace(/\s+/g,' ').trim();
console.log(el);
$('.score-table').empty();
$('.score-table').html(el);
}
the console.log outputs the plain text quoted above.
Now the expected behavior is that the table will be displayed in the div with the class "score-table" but instead its just showing the following:
# Username Score 1 Marvin 3.0 2 testerich 3.0
So it basicly stripped al the html tags off the string? Im searching for hours now but did not find a solution for this.
The problem is your html response, not jQuery or js. Look at the first row of your html:
<table class="table"></table>
This doesn't make any sense. It needs to look like this:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 1 </th>
<td>Marvin</td>
<td>3.0</td>
</tr>
<tr>
<th scope="row"> 2 </th>
<td>testerich</td>
<td>3.0</td>
</tr>
</tbody>
</table>
You have closed the Table right after you opened it..
<table class="table"></table>
update your html to this:
<table class="table"><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody></table>
Is there possible for the angular repeat to achieve that?Basically Im wondering there is a way to loop the 2 together? Really appreciate any help!
Controller:
$scope.date=[
{ID:1,Date:'2016-11-12'},
{ID:2,Date:'2016-11-15'},
{ID:3,Date:'2016-12-06'}
]
HTML:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
And I wish the column Bal and Order will repeat side by side under each date column.
You can use ng-repeat-start and ng-repeat-end which was introduced in Angular 1.2
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
Working example https://jsfiddle.net/9ve3fu0m/
You can accomplish this by using a nested table like this:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">
<table border="1" >
<tr>
<th colspan="2">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
</th>
</tr>
</table>
You can use ng-repeat-start and ng-repeat-end
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
</tr>