I have the following table:
<div>
<table class="table-alignment table table-striped">
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
<div *ngIf="loading == true" class="loader loader-alignment"></div>
<div *ngIf="loading == false">
<tr *ngFor="let s of stats" class="text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</div>
</table>
</div>
The problem here is that the entire tr is rendered in 1st column. How do i fix this?
Consider using the basic HTML elements thead and tbody.
Also, for example you don't have to write loading == false, write !loading instead.
<div>
<table class="table-alignment table table-striped">
<thead>
<tr class="text text-center">
<th>Symbol</th>
<th>Quantity</th>
<th>Timestamp</th>
<th>Amount</th>
</tr>
</thead>
<div *ngIf="loading" class="loader loader-alignment"></div>
<tbody *ngIf="!loading">
<tr *ngFor = "let s of stats" class = "text text-center" [ngClass]="{'text-success' : s.transaction_type=='BUY', 'text-danger' : s.transaction_type=='SELL'}">
<td>{{s.tradingsymbol | formatSymbol}}</td>
<td>{{s.filled_quantity}}</td>
<td>{{s.order_timestamp}}</td>
<td>{{s.average_price}}</td>
</tr>
</tbody>
</table>
</div>
Related
Firstly, here is my UI:
My output to my right displayed as a result of using the tag <tbody> inside my ajax:
success: function (response){
var tbody="";
$.each(response.all_categories, function (key, cat) {
tbody+=`
<tr>
<td class="p-0 btn-category-list-col">
<button id="submit" type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>
</tr>`; });
$('tbody').html(tbody) }
My problem is that I am using two <tbody> in this same page, so the table to the right shows up in the left:
Is there some way to make my ajax function read a class or an id instead of the tag itself?:
So kind of like my line tbody+= becomes: tbody(class/id)+=
Here is my table that uses two tbody tags:
<div class="col-md-2 border">
<table id="categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
any help would be appreciated thanks
If you didn't use the same IDs for both tables(which is invalid html by the way) you could have used the table id to select the correct one.
From the html above you could use the table class to identify it
$('table.table-striped tbody').html(tbody);
or you could fix the invalid duplicate ids and use the id to select the correct table
<div class="col-md-2 border">
<table id="side-categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
$('#main-categoryList tbody').html(tbody);
I'm using Angular and want to get index of rows inside the table when user clicks.When I try to get,it returns always 0.Because I have just one tr inside tbody but even I cange with $('table td') still getting same index.What should I change?
Table in HTML
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody *ngFor="let studentsEl of items2">
<tr>
<td>{{studentsEl.name}}</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Typescript file of the component
constructor() {
$(document).ready( function() {
$('table tr').click( function() {
alert($(this).index());
});
});
Here you have a couple of issues:
use ngFor for table row
You shouldn't use dosument.ready in constructor, but create a method and click handler.
Here is HTML:
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let studentsEl of items2; let idx = index">
<td>
<span (click)="getIndex(idx)">
{{studentsEl.name}} yourIndex: {{ idx }}
</span>
</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Your typescript file:
getIndex(idx){
console.log(idx);
}
Hi i am working angularjs application code
when i trying to update any value or field in js file i will show changes when i refresh browser but when i changes in html file it is not slowing any changes
i am not sure it will work like js file or i need to do some thing deffenent
<div ng-if="companyProfile.loansAndRatings[0].ratings != undefined" >
<div class="panel-heading">Credit ratings</div>
<hr class="loan-margin">
<div class="panel-body">
<table class="table table-bordered ">
<thead>
<tr>
<th>Agency</th>
<th>Instrument</th>
<th>Instrument Details</th>
<th>Rating</th>
<th>Outlook</th>
</tr>
</thead>
<tbody class="fontSynopsis">
<tr ng-repeat="creditRatings in companyProfile.loansAndRatings[0].ratings track by $index">
<td>{{creditRatings.agency}}</td>
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrumentDetails}}</td>
<td>{{creditRatings.rating}}</td>
<td>{{creditRatings.outlook}}</td>
</tr>
</tbody>
</table>
</div>
</div>
When i update code and any value static value that not slowing after i refresh page
<div ng-if="companyProfile.loansAndRatings[0].ratings != undefined" >
<div class="panel-heading">Credit ratings</div>
<hr class="loan-margin">
<div class="panel-body">
<table class="table table-bordered ">
<thead>
<tr>
<th>Agency</th>
<th>Instrument</th>
<th>Instrument Details</th>
<th>Rating</th>
<th>Outlook</th>
</tr>
</thead>
<tbody class="fontSynopsis">
<tr ng-repeat="creditRatings in companyProfile.loansAndRatings[0].ratings track by $index">
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrumentDetails}}</td>
<td>{{creditRatings.rating}}</td>
<td>{{creditRatings.outlook}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Why bootstrap responsive table is not working with dir-paginate.
I have created a responsive grid HTML table by using bootstrap which is working with hard-coded data, but when my angular developer colleague used some 'dir-paginate' for retrieving data from the database then my responsive design code is not working when minimizing the browser shorter.
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<tr>
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I think you are using the directive at the wrong Position. You want to repeat the <tr>-element instead of the <tbody>-element.
For more Information look at this answer: https://stackoverflow.com/a/34392061/7225524
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a bootstrap table and I want to place on each dynamic row under the Tara Image tab a button with the text let's say "get image". This is the code:
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true"
>
<thead>
<tr>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th>Tara Image</th>
</tr>
</thead>
</table>
</div>
</div>
I will post a picture with my actual table (I painted with red how I want my buttons to be placed):
var r = document.getElementById('MYTABLE').getElementsByTagName("tr");
for(i=0;i<r.length;i++){
var td=r[i].getElementsByTagName("td")[2];
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode(td.innerHTML ); // Create a text node
btn.appendChild(t); // Append the text to <button>
td.removeChild(td.firstChild);
td.appendChild(btn);
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true"
>
<thead>
<tr>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th>Tara Image</th>
</tr>
</thead>
<tbody id='MYTABLE'>
<tr>
<td>1</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
<tr>
<td>2</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
<tr>
<td>3</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this helps!