I've got a table that I need three different links to show up on the specific row that the mouse is hovering over. The links are "View", "Edit", and "Trigger Now".
I need this event to happen only on the sessions table.
Here's my current HTML:
<div>
<h1>Manage Workflows</h1>
</div>
<div class="tablez">
<table class="table table-hover" id = "groups">
<thead>
<tr>
<th scope="col">Groups</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let row of rows" (click) = "onRowClick(row.id)">
<td class="data">{{row.group}}</td>
</tr>
</tbody>
</table>
<table class="table" id = "sessions">
<thead>
<tr>
<th scope="col">Sessions</th>
<th scope="col" id = "trigger">Next Trigger</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let row of tableTwo">
<td scope="row">{{row.session}}</td>
<td scope="row" id = "trigger" >{{row.nextTrigger}}</td>
</tr>
</tbody>
</table>
</div>
You can use mouseover event of the angular
<tr *ngFor = "let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false" >
<td scope="row">{{row.session}}</td>
<td scope="row" id = "trigger" >{{row.nextTrigger}} </td>
<td *ngIf="!showLinks" scope="row"> View Edit Trigger Now links </td>
</tr>
Related
I have a table in angular 6. This is working find, But I want to use it in ngfor and it not working as expected. Here is the table:
.hiddenRow {
padding: 0 !important;
}
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle" style="cursor: pointer;">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse jumbotron" id="demo1">
Demo1
</div>
</td>
</tr>
</tbody>
</table>
This is working find except that I want to include *ngFor in order to loop on many elements. Any idea ?
Put this instead of the table row you want to repeat for each row
<tr *ngFor="for row of rows">
<td> {{row.id}} </td>
<td> {{row.date}} </td>
<td> {{row.desc}} </td>
<td> {{row.credit}} </td>
</tr>
(this code is not tested)
Update
Try this:
<table class="table table-condensed" *ngFor="let l of list_name" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description<th>
<th>Credit</th>
</tr>
</thead>
...
You can iterate over an array with your desired length
I am currently working on the update table row. I have a table with list of rows
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><a (click)="editPopUp()">Edit</a></td>
</tr>
</tbody>
</table>
On Edit click a modal will popup that contains table to edit the selected row. This editPopUp function shows up the modal.
ts
editPopUp(){
this.modalOn = true;
}
modal
<app-dialog
[showDialog]="modalOn"
[titleText]="modalTitle"
[hideNegative]="true"
[hidePositive]="true"
(closeButtonClicked)="this.resetModal()"
[level]="1"
>
<form
[formGroup]="maintenanceProductTargetForm" *ngIf="maintenanceProductTargetForm"
(ngSubmit)="editMaintenanceProduct(maintenanceProductTargetForm.value)"
>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><input type="text" formControlName="first_name" name="first_name"></td>
<td><input type="text" formControlName="last_name" name="last_name"></td>
<td><a (click)="update()">Edit</a></td>
</tr>
</tbody>
</table>
</form>
</app-dialog>
I am not sure how to pass this row data to this popup?
Any Help please
<!--TableDataComponent.html-->
<table>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr *ngFor = "let data of dataList">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td><button (click) = "editPopUpmodal(data)">Edit</button></td>
</tr>
</table>
<!--Modal Pop Up -->
<div *ngIf="showModalPopUp">
<input type="text" [(ngModel)] = "editData.id" />
<input type = "text" [(ngModel)] = "editData.name" />
<button (click) = "updateData(editData)" > Update </button>
</div>
Imagine above is your code for table and pop-up (Kindly ignore that there is nothing specific to Modal, I just took an element to show as modal) which are in same component.html
//TypeScript
editData:any = {};
showModalPopUp : boolean = false;
//Constructor, ngOnInit and so on will come
editPopUpmodal = (data) => {
this.showModalPopUp = true;
this.editData = Object.assign(data);
}
updateData = (updatedData) => {
//Call the API through the data service to update the object
}
I have the code in angular to redirect to other page.
<div class="box-body no-padding">
<table class="table table-condensed" id="example">
<tr>
<th>Month</th>
<th>Amount</th>
</tr>
<tr ng-repeat="payment in allPayments">
<td><a ui-sref="/MoneyIn({month: payment.year})">{{payment.year}}</a></td>
<td>{{payment.amt}}</td>
</tr>
</table>
</div>
On click of month it must get the row data which is in other html table just below the month which I have clicked.
<table class="table table-condensed">
<tr>
<th>Name</th>
<th>Payment Date</th>
<th>Payment Amount</th>
</tr>
<tr ng-repeat="payment in allPayments">
<td>{{payment.name}}</td>
<td>{{payment.payment_date}}</td>
<td>{{payment.amt}}</td>
</tr>
</table>
I want the above table data to come below the month which is clicked.
I currently have a table with multiple rows. I was wondering if there is a way to collapse several rows (i.e. BMW, Toyota, and Honda) under the first row (i.e. cars) with out remove the "colspan" spacing. All the example I have seen seems like you have to lose the formatting of the collapsed rows.
<table class="table table-sm table-hover">
<thead class="thead-inverse">
<thead>
<tr>
<th colspan="6"></th>
<th colspan="3">Current Month</th>
<th colspan="3">Year-to-Date</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#cars" class="accordion-toggle">
<th colspan="6">Cars</th>
<td colspan="3">456 mi</td>
<td colspan="3">700 mi</td>
</tr>
<tr class="hiddenRow"><div class="accordian-body collapse" id="cars">
<td colspan="1"></td>
<td colspan="5">Toyota</td>
<td colspan="3">534 mi</td>
<td colspan="3">800 mi</td>
</tr>
<tr>
<th colspan="1"></th>
<th colspan="5">Honda</th>
<td colspan="3">600 mi</td>
<td colspan="3">770 mi</td>
</tr>
</div>
</tbody>
</table>
If you use bootstrap you probably already have jQuery loaded, so you could use it to query and hide the rows on click. Like this:
(function() {
$('#carsTable .toggle').on('click', function() {
$('#carsTable .hideableRow').toggleClass('hiddenRow');
});
})()
https://jsfiddle.net/q4w8062y/1/
Another possibility, not sure it would work as you want, is to put the "toggler-row" on another tbody or as <table>'s child, and use the collapse class on <tbody>. Like this:
https://jsfiddle.net/wkmmro89/1/
http://www.w3.org/TR/html-markup/table.html#table
I am trying to shrink one cell in the table, but it refuses to shring..here is my table.
<table cellspacing="0" style="position: absolute;width: 990px;margin-left: 8px;" align="center">
<thead>
<tr class='no-wrap'>
<th width="20%"></th>
<th width="10%">Our Rating</th>
<th width="10%">Users' Rating</th>
<th width="30%">Review</th>
<th width="30%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"></td>
<td width="10%">Our Rating</td>
<td width="10%">Users' Rating</td>
<td width="30%">Review</th>
<td width="30%">Price</td>
</tr>
</tbody>
</table>
The problem is that the review part doesnt shrink..even when I give it a lower percentage..why is that?
You have incorrect HTML syntax.
You need to wrap your table row elements in tr:
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
Also you have a </th> where you should have a <td> on your 2nd row, 4th cell (Review):
<td width="30%">Review</th>