I am parsing JSON data and displaying the data to a table using angular JS.
There are many table rows that I populated from JSON file using ng-repeat.
Status.winner could be of values 0 or 1.
If the value for the winner for the table row is 0, I would like to highlight Playerdata[0].playername for that table row to yellow color.
Else If the winner for the table row is 1, then I would like to highlight Playerdata[1].playername for that table row to yellow color.
How do I do that for each row with different values of winner, which can be 0 or 1?
<body ng-app="form-input" ng-controller="ctrl">
<table class="table table-bordered table-condensed ">
<caption>Recent Game Statistic</caption>
<tbody>
<tr class="success" ng-repeat="status in recentGame">
<td ng-bind="status.Winner"> </td>
<td ng-bind="status.Playerdata[0].Playername"> </td>
<td ng-bind="status.Playerdata[1].Playername"> </td>
</tr>
var app2 = angular.module('form-input', []);
app2.controller('ctrl', function($scope,$http) {
var url = "http://...JSON";
$http.get(url).success( function(data) {
$scope.recentGame = data.RecentGames;
});
})
Use ngClass:
<tr class="success" ng-repeat="status in recentGame">
<td ng-bind="status.Winner"></td>
<td ng-bind="status.Playerdata[0].Playername" ng-class="{winner: status.Winner == 0}"></td>
<td ng-bind="status.Playerdata[1].Playername" ng-class="{winner: status.Winner == 1}"></td>
</tr>
Then in CSS define .winner class styles the way you need. For example:
.winner {
background-color: yellow;
}
Related
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
I’m using Bootstrap Table http://bootstrap-table.wenzhixin.net.cn/
All rows in the table are linked with data-href=.
All links work correctly after the table is loaded, but when I re-sort the table (i.e. click on "URL" column header), the links no longer work.
Any ideas how to fix it?
Here is a test code:
<table class="table" id="lst_art_adm"
data-toggle="table"
data-striped="true"
data-search="true"
data-sort-name="site"
data-sort-order="asc"
data-mobile-responsive="true"
mobileResponsive="true">
<thead>
<tr>
<th data-field="site" data-sortable="true">Site</th>
<th data-field="url" data-sortable="true">URL</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="mrow" data-href="https://google.com">
<td id="td-id-1" data-sortable="true">Google</td>
<td>google.com</td>
</tr>
<tr id="tr-id-2" class="mrow" data-href="https://yahoo.com">
<td id="td-id-2" data-sortable="true">Yahoo</td>
<td>yahoo.com</td>
</tr>
</tbody>
</table>
$(function(){
$(".mrow").on("click", function (e) {
window.location = $(this).data("href");
});
});
And the jsfiddle
I found a solution myself :)
The table must be included in a div element, i.e. class="mytable".
Then the jquery should be changed like this:
$(function(){
$(".mytable").on("click", ".table tbody tr", function()
window.location = $(this).data("href");
});
});
Then the function will found the row after re-sorting.
I am new in ASP.NET MVC. There are 2 tables in my database named "tbl_Project" and "tbl_Note". Each project can have one or more notes, so I keep/save the "ProjectID" variable in the "tbl_Note".
What I want to do: On the page where the project list is located, I want to show the total number of notes for each project. I tried a few things but I've fail.
This is my projects list page:
#if(Model.Any())
{
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>Total Note</th>
<th>Project Name</th>
<th>Contract Start Date</th>
<th>Contract End Date</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tbody>
<tr>
<td>
<!-- Total number of notes will come here -->
</td>
<td>
<p>#item.ProjectName</p>
</td>
<td>
#item.ContractStartDate.Value.ToString("dd.MM.yyyy");
</td>
<td>
#item.ContractEndDate.Value.ToString("dd.MM.yyyy");
</td>
</tr>
</tbody>
}
</table>
}
else
{
<p>Project is not available!</p>
}
I've try something like this but it's not working:
#if(item.tbl_Note != null)
{
if(item.tbl_Note.ProjectID == Model.ProjectID)
{
#Model.Sum(b => b.tbl_Note.ProjectID.Count)
}
}
This line gives an error: item.tbl_Note.ProjectID and the error is: 'ICollection' does not contain a definition for 'ProjectID and no extension method 'ProjectID' accepting a first argument of type 'ICollection' could be found.
How can I calculate the total number of notes? And if there is any other code block you want to insert, please tell me.
According to the error, item.tbl_Note is of type ICollection<T> and you are looking for a ProjectID property in it.
Change it to:
#if(item.tbl_Note != null)
{
#item.tbl_Note.Count
}
Is it possible in AngularJS to change the style of row when the available stocks is equals to 10? or is there any way to do this?.. how to do that?
Here's my code..
<table id='table12'>
<thead id='top'>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Price</th>
<th>Stock In</th>
<th>Available Stocks</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter">
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_id}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_name}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.price}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.stock_in}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.available_stocks}}</td>
<td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.description}}</td>
</tr>
</tbody>
</table>
You can do it with ng-class by passing an object with a test against inventory.price value:
<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter" ng-class="{'red' : inventory.price <= 10}">
...
</tr>
you can change style of row with anulgarJS via html markup and via js code:
markup -
1.1. ng-style: <div data-ng-style="{background: price > 50 ? 'red' : 'green'}"></div>
1.2. ng-class: <div data-ng-class="{'some-class-name': price > 50, 'other-class-name': price <= 50}></div>
js code -
2.1. directive link function:
link: function (scope, element, attrs, ctrl){
element.find('tr').css(...); // like as jquery...
}
2.2. controller:
angular.module('myModule').controller('myCtrl', function($element, $scope){ $element.find('tr').css(...); // like as jquery} })
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } "></tr>
You can use above syntax to highlight table rows
I am using foreach loop insoide my view to display few radiobutton rows..
sample radiobutton
<tr>
<td width="30%">
Integrity
</td>
<td width="17%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 1, new { id = "main_" + i + "__nested_integrity) Poor
</td>
<td width="18%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 2, new { id = "main_" + i + "__nested_integrity" }) Satisfactory
</td>
<td width="18%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 3, new { id = "main_" + i + "__nested_integrity" }) Outstanding
</td>
<td width="16%">#Html.RadioButtonFor(x => x.main.ElementAt(i).nested.integrity, 4, new { id = "main_" + i + "__nested_integrity" }) Off
</td>
</tr>
Because i was getting problem while Model binding therefore i created manual id to suit my requirement(different incremented id ).
But again problems comes with name attribute i think.
for first and every loop i am getting same name attribute(not incremented) i.e if i select radiobuttton from first loop then it deselect taht row from other loop.
Like
Loop1 id= "main_0__nested_integrity"
Loop2 id= "main_0__nested_integrity"
Loop1 name= "nested.integrity"
Loop2 name= "nested.integrity"
as you can see name attribute for all loops are same, with different id.
Now my Question is...Is it posssible to override name attribute of RadioButtonFor like id??
Now my Question is...Is it posssible to override name attribute of RadioButtonFor like id??
No, that's not possible. The name attribute will be calculated from the lambda expression you passed as first argument.
Personally I would use editor templates and not bother with any loops at all
#model MainViewModel
<table>
<thead>
...
</thead>
<tbody>
#Html.EditorFor(x => x.main)
</tbody>
</table>
and in the corresponding editor template:
#model ChildViewModel
<tr>
<td width="30%">
Integrity
</td>
<td width="17%">
#Html.RadioButtonFor(x => x.nested.integrity, 1) Poor
</td>
<td width="18%">
#Html.RadioButtonFor(x => x.nested.integrity, 2) Satisfactory
</td>
<td width="18%">
#Html.RadioButtonFor(x => x.nested.integrity, 3) Outstanding
</td>
<td width="16%">
#Html.RadioButtonFor(x => x.nested.integrity, 4) Off
</td>
</tr>