Conditionals: Replacing a value with a glyphicon

Conditionals: Replacing a value with a glyphicon - javascript

I am trying to make it so if in my table a status is 'R' then it will replace that 'R' with the glyphicon, glyphicon glyphicon-alert.
I've thought of different ways of doing it such as making it a true or false condition because having 'G' appear is not necessary (if you could assist with making it if it is 'G' display ' ' that would be of use too) but I haven't made much headway with that.
Can someone assist in this?
This is a plnkr of the code in question.
http://plnkr.co/edit/CTRlMFnw4bxXy8wYHTSP?p=preview
<tbody>
<tr class="tt" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat- start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty">
<td class="shrink"><b>{{x.a}}</b></td>
<td class="shrink">{{x.b}}</td>
<td class="shrink"><u>{{x.c}}</u></td>
<td class="shrink">{{x.d}}</td>
<td class="shrink">{{x.e}}</td>
<td class="shrink">{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>

I would fix it like this
<tr class="tt" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProperty">
<td ng-class="{'glyphicon glyphicon-alert': x.a == 'R'}"><b ng-if="x.a != 'R'">{{x.a}}</b></td>
<td class="shrink">{{x.b}}</td>
<td class="shrink"><u>{{x.c}}</u></td>
<td class="shrink">{{x.d}}</td>
<td class="shrink">{{x.e}}</td>
<td class="shrink">{{x.f}}</td>
</tr>

Related

html table returns NaN data

My html table shows NaN value because of field name has a symbol(/) in between.
below is my code
<tr ng-repeat="user in msg.options | orderBy:sortType:sortReverse | filter:search track by $index"
ng-click="msg.payload = user.send(msg);" style="width:100%" flex>
<td ng-bind="$index+1"></td>
<td ng-bind="user.PalletID"></td>
<td ng-bind="user.Description"></td>
<td ng-bind="user.Location"></td>
<td ng-bind="user.Empty/NonEmpty"></td>
<td style="text-align:center" ng-click="msg.payload = user.send(msg);" >
<img src="http://192.168.137.1:1880/ui/Images/unload32.png" width="30" height="30">
</td>
</tr>
Please help to resolve this issue.

rowspan in angular application

I have the following table in an Angular 8 application where I am looping through some data and displaying the data in the table. In the table I want to use rowspan for "Status" and "Create Date" since these will always be the same. "Name" and "Amount" will differ so need different rows for them but a single entry for Status. I tried rowspan="abc.length" for {{data.status}} but it does not work.
<table class="table tableBorder table-responsive table w-100">
<tr style="text-align: center;" class="bg-gray">
<td class="w-12 bold text-left">Name</td>
<td class="w-10 bold text-left">Amount (Rs.Cr.)</td>
<td class="w-13 bold text-left">Status</td>
<td class="w-8 bold text-left">Create Date</td>
</tr>
<tr *ngFor="let data of abc; let i = index">
<td class="w-12 truncate-text ref-number-truncate line-height23">
{{data.name}}
</td>
<td class="w-8 truncate-text">{{data.amount}}</td>
<td class="w-13 truncate-text">{{data.status}}</td>
<td class="w-10 truncate-text">{{data.createdDate}}</td>
</tr>
</table>

Try [attr.rowspan] as
<td [attr.rowspan]= "abc.length">

Javascript Select anchors with attributes that contain word

I am trying to only select a specific set of links in a table. I figure that the best way to do it is by selecting them by the title attribute that contains all contain the word 'ULD'.
Here is my code the allowed me to narrow it down to all links in a table but no further. I tried querySelectorAll() and selectElementsbyTitle but had no luck. Also keep in mind this needs to work in IE11 and no JQuery.
var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a");
Here are the links I want to select out of the following table:
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
Here is a sample of the table:
Missed Bag Report
<img src="../Content/images/icons/excel.gif" border="0" alt="Click to export to excel." title="Click to export to excel." height="13" width="13">
</a>
</SPAN>
<SPAN CLASS="CaptionRight">
<SPAN ID="Func15543_PagingControlOne"></SPAN>
</SPAN>
</CAPTION>
<THEAD>
<TR>
<TH ROWSPAN="2">#</TH>
<TH COLSPAN="5">Destination</TH>
<TH ROWSPAN="2">Load<BR>Create<BR>Sort</TH>
<TH ROWSPAN="2">Bag Close Time</TH>
<TH ROWSPAN="2">Age > 90 min (Red)</TH>
<TH ROWSPAN="2">Bag Tag #</TH>
<TH ROWSPAN="2">Pkgs<BR>in<BR>Bag</TH>
</TR>
<TR>
<TH>Cntry<BR>Code</TH>
<TH>SLIC</TH>
<TH>Sort</TH>
<TH>Serv Lvl</TH>
<TH>Location</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD CLASS="CenterText ">1</TD>
<TD CLASS="CenterText ">US</TD>
<TD CLASS="CenterText ">4009 </TD>
<TD CLASS="CenterText ">D</TD>
<TD CLASS="CenterText ">2DA</TD>
<TD CLASS="CenterText ">GRADE LANE HUB </TD>
<TD CLASS="CenterText ">T</TD>
<TD CLASS="CenterText ">
12/14/18 4:12 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5 ">
56 Mins. Old
</TD>
<TD CLASS="CenterText ">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
</TD>
<TD class="CenterText "> 6</TD>
</TR>
<TR>
<TD CLASS="CenterText G_CLR_6">2</TD>
<TD CLASS="CenterText G_CLR_6">US</TD>
<TD CLASS="CenterText G_CLR_6">0759 </TD>
<TD CLASS="CenterText G_CLR_6">N</TD>
<TD CLASS="CenterText G_CLR_6">GRD</TD>
<TD CLASS="CenterText G_CLR_6">SADDLEBROOK </TD>
<TD CLASS="CenterText G_CLR_6">T</TD>
<TD CLASS="CenterText G_CLR_6">
12/14/18 4:15 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5">
53 Mins. Old
</TD>
<TD CLASS="CenterText G_CLR_6">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SEL3I0 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="8922482455613715109"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SEL3I0
</A>
</TD>
<TD class="CenterText G_CLR_6"> 6</TD>
</TR>

You can use querySelectorAll with an attribute selector [attr] and a contains flag *=:
var table = document.querySelector('table');
var links = table.querySelectorAll('a[title*="ULD"]');
console.log(links);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

Pass a class name in AngularJS with ng-class

I have:
<tr ng-class="{{line.color}}" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
<td>{{$index + 1}}</td>
<td>{{line.username}}</td>
<td>{{line.games}}</td>
<td>{{line.winners}}</td>
</tr>
When I open debugger I see:
<tr class="ng-scope" ng-class="BLUE" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
<td class="ng-binding">1</td>
<td class="ng-binding">Admin</td>
<td class="ng-binding">0</td>
<td class="ng-binding">0</td>
</tr>
So, my class BLUE is not applied to my element.
How can I fix it?

It should be
<tr ng-class="line.color" ...>
Instead of
<tr ng-class="{{line.color}}" ...>
JSFiddle demo

Table: Show only the first row of table tbody. How to hide the succeeding 1st rows?

The very 1st row of EVERY tbody is the row header (contains the column Names). The rest of EVERY tbody succeeding 1st rows are not necessary and wanted to hide them.
Classes used:
toprowHeader = 1st row that holds every column names
recordsRow = holds the other record details
For now it shows like this:
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 1 | admin |my admin message |
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 2 | sender1 |reply to admin |
Here is the sample structure I wanted to achieve:
--------------------------------------------
| MessageID | Sender | Message |
--------------------------------------------
| 1 | admin |my admin message |
| 2 | sender1 |reply to admin |
Though I have some options to make it easier but the requirement says that every record should be inside a tbody
Here is my Sample Table structure:
<table class="gridtable">
<tbody>
<tr class="toprowHeader" >
<td class="">...</td>
</tr>
<tr class="recordsRow " >
<td class="">...</td>
</tr>
<tr class="recordsRow " >
<td class="">...</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">...</td>
</tr>
<tr class="recordsRow ">
<td class="">...</td>
</tr>
<tr class="recordsRow ">
<td class="">...</td>
</tr>
</tbody>
</table>
Added requirement:
A lot of you questioned the table structure above but the main reason why I placed it inside individual tbody its because I also have a button to be able to move the 1st tbody to the bottom/last of the table.
I use PHP to display records

see output below ,Use this
It Will hide all the toprowHeaders except the first one as per your requirement
$('tr.toprowHeader:gt(0)').hide();
$('table').append($('tbody:eq(0)'));
console.log($('tbody:eq(0)'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="gridtable">
<tbody>
<tr class="toprowHeader" >
<td class="">title 1</td>
</tr>
<tr class="recordsRow " >
<td class="">record1</td>
</tr>
<tr class="recordsRow " >
<td class="">record1</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title2</td>
</tr>
<tr class="recordsRow ">
<td class="">record2</td>
</tr>
<tr class="recordsRow ">
<td class="">record2</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title3</td>
</tr>
<tr class="recordsRow ">
<td class="">record3</td>
</tr>
<tr class="recordsRow ">
<td class="">record3</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title4</td>
</tr>
<tr class="recordsRow ">
<td class="">record4</td>
</tr>
<tr class="recordsRow ">
<td class="">record4</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title5</td>
</tr>
<tr class="recordsRow ">
<td class="">record5</td>
</tr>
<tr class="recordsRow ">
<td class="">record5</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title6</td>
</tr>
<tr class="recordsRow ">
<td class="">record6</td>
</tr>
<tr class="recordsRow ">
<td class="">record6</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td class="">title7</td>
</tr>
<tr class="recordsRow ">
<td class="">record7</td>
</tr>
<tr class="recordsRow ">
<td class="">record7</td>
</tr>
</tbody>
</table>

You can use CSS as shown below:
tbody:not(:first-child) .toprowHeader{
display: none;
}
<table class="gridtable">
<tbody>
<tr class="toprowHeader">
<td>Title</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
</tbody>
<tbody>
<tr class="toprowHeader">
<td>Title</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
<tr class="recordsRow ">
<td>Record</td>
</tr>
</tbody>
</table>
By the way, You should really try modifying the script to omit the extra titles instead (whichever generates it), and have a single title row inside <thead>

Develop Reference

JavaScript is the programming language of the Web.

Conditionals: Replacing a value with a glyphicon - javascript

Related

html table returns NaN data

rowspan in angular application

Javascript Select anchors with attributes that contain word

Pass a class name in AngularJS with ng-class

Table: Show only the first row of table tbody. How to hide the succeeding 1st rows?

Categories

Resources