Adding static header name while making dynamic table - javascript

I am making a table which row & column depend on JSON
JSON:
$scope.dataToShow=[
tableHeder=["First Name","Age"],
{
name:"rahim",
age:23
},
{
name:"karim",
age:24
}
];
My code:
<table>
<tr>
<th>Select</th>
<th ng-repeat="header in dataToShow.tableHeader"></th>
</tr>
<tr ng-repeat="row in dataToShow">
<td>
<input type="checkbox">
</td>
<td ng-repeat="item in row">{{item}}</td>
</tr>
</table>
I want my view like:
Select Name age
checkbox rahim 23
checkbox karim 24
But my I am getting:
Select
Checkbox Name age
Checkbox rahim 23
Checkbox karim 24
How can I solve it???


if the JSON response is not from backend, do some modifications
JSON:
$scope.dataToShow={
tableHeder:["First Name","Age"],
tableData: [{
name:"rahim",
age:23
},
{
name:"karim",
age:24
}]
};
HTML:
<table>
<tr>
<th>Select</th>
<th ng-repeat="header in dataToShow.tableHeader">{{header}}</th>
</tr>
<tr ng-repeat="row in dataToShow.tableData">
<td>
<input type="checkbox">
</td>
<td >{{row.name}}</td>
<td >{{row.age}}</td>
</tr>
</table>
This will definitely work


Try this code :
<table>
<tr>
<th>Select</th>
<th>{{dataToShow.tableHeder[0]}}</th>
<th>{{dataToShow.tableHeder[1]}}</th>
</tr>
<tr ng-repeat="row in dataToShow">
<td>
<input type="checkbox">
</td>
<td >{{row.name}}</td>
<td >{{row.age}}</td>
</tr>
</table>
Using $index you can get the index number of the loop.

Related

Copy data from selected rows of one table to another table using jQuery

I got 2 tables one of them has my products data such name,and bar-code.
The other one is empty and I want to copy products' table (selected rows only) into the second table via jQuery.
<table id="exampleTable1" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd selected">
<td class="sorting_1">545333456</td>
<td>Galaxy S9</td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S6</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>SD 64G </td>
</tr>
<tr role="row" class="even selected">
<td class="sorting_1">876543</td>
<td>Galaxy S5</td>
<tr role="row" class="odd">
<td class="sorting_1">407654</td>
<td>Iphone 7 </td>
</tr>
</tbody>
</table>
My second table :
<table id="exampleTable2" style="max-width:50%;">
<thead>
<tr>
<th>bar-code</th>
<th>product name</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
<button class="btn btn-success" data-panelId="copy1" id="copy1">
Copy from exampleTable1 To exampleTable1
</button>

There are a few jQuery methods that make this easy to do, namely the .clone() and .each() method. You could achieve what you want by the following:
$('#copy1').click(function() {
$('tr.selected', '#exampleTable1').each(function() {
// For each "selected" row of table1 ..
var rowFromTable1 = $(this);
// .. Take a clone/copy of it ..
var clonedRowFromTable1 = rowFromTable1.clone();
// .. And append the cloned row to the tbody of table2
$('tbody', '#exampleTable2').append( clonedRowFromTable1 )
})
})

rowspan for 3 columns using angularJS

I have a category list that contains name and subject list.
The subject list contains name and course list.
The course list contain name.
I want to display this data in table that will rowspan category or subject if they are the same. For example:
Category Subject Course
cat1 sub1 ''
sub2 cour1
cour2
sub3 ''
cat3 ''
Currently I have it working for two columns using this:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.name }}</td>
</tr>
</tbody>
</table>
However, I am having trouble doing it for 3 columns. This is the code I have that is not working. The course name are not being displayed and subject name become listed in column order instead of row order. Any suggestion:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td rowspan="{{subject.courseList.length+1}}">{{ subject.name }}</td>
<tr ng-repeat="course in subject.courseList">
<td>{{ course.name }}</td>
</tr>
</tr>
</tbody>
</table>
Sample Data:
[
{"id":95,"categoryName":"A new catagory",
"subjectList":[{"id":112,"subjectname":"2ndnewcat","curcount":0,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"},
{"id":76,"subjectname":"ZZZZZZZZZZZZZZZZZZ_class","curcount":0,
"courseList":[{"coursename":"thiswillbenew111111111112","curcount":1}]}]},
{"id":93,"categoryName":"David Test",
"subjectList":[{"id":75,"subjectname":"This is a test","curcount":1,
"courseList":[{"coursename":"newewst1","curcount":0}]}]},
{"id":116,"categoryName":"New Category",
"subjectList":[{"id":79,"subjectname":"New Subject","curcount":2,
"courseList":[{"coursename":"ISO training part 2","curcount":0}]}]},
{"id":0,"categoryName":"cat1",
"subjectList":[{"id":15,"subjectname":"test","curcount":4,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"}]},
{"id":11,"categoryName":"cat2",
"subjectList":[{"id":68,"subjectname":"asdasd","curcount":5,
"courseList":[{"coursename":"david1","curcount":0},{"coursename":"thisisatest","curcount":0}]}]},
{"id":12,"categoryName":"cate3",
"subjectList":[{"id":12,"subjectname":"newest1","curcount":6,
"courseList":[{"coursename":"cous1","curcount":0}]}]},
{"id":163,"categoryName":"emptylist",
"subjectList":"[{\"name\":\"-\",\"curcount\":0}]"}
]
This is current code I am testing. It will will rowspan the category, display each subject once and then display all the courses for each subject in list in a single cell. I would prefer to rowspan subject too, but this is what I got working so far.
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.subjectname }}</td>
<td> <li ng-repeat="course in subject.courseList" >{{ course.coursename }} </li></td>
</tr>
<td ng-if="category.subjectList.length==27"> </td>
<td ng-if="category.subjectList.length==27"> </td>
</tbody>
</table>
Thanks,
AB

The two column case should be:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
{{subj.name}}
</td>
</tr>
</tbody>
For the three column case, nest a <table> in the <td> element:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
<table>
<tr ng-repeat="class in subj.classList">
<td rowspan="subj.classList.length+1">
{{subj.name}}
</td>
<td>
{{class.name}}
</td>
</tr>
</table>
</td>
</tr>
</tbody>

jquery - finding elements in a table and changing other elements based on findings

I'm trying to adapt other examples with similar questions here on stackoverflow... but am stumped right now.
Here's what my html table looks like after it's been rendered:
<table class="table table-striped" id="status">
<thead>
<tr>
<th>Name</th>
<th>REP</th>
<th>Package</th>
<th> CV</th>
<th>Latest CV</th>
<th>Custom </th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfasdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">tmm</td>
<td>tmm-4.2.7-r1</td>
<td>4.2.7-r1</td>
<td> </td>
<td class="status_button"><button type="button" class="btn btn-success"></button></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">a-cis</td>
<td>a-cis-0.1.0-r0</td>
<td>0.1.0-r0</td>
<td> </td>
<td class="status_button"><button type="button" class="btn btn-danger"></button></td>
</tr>
</tbody>
</table>
What I need:
After the table has been rendered, I want to find all rows that have a danger button ("btn-danger") and change the color of the text in the "Package" cell / td to red.
Based on similar questions here on stackoverflow, here's what I have so far:
122 <script>
123 $( document ).ready(function() {
124 $('.status_button').each(function(i, n) {
125 console.log($(n.innerHTML));
126 //somehow id the sibling <td> that has class
127 //package and change the font color
128 //to red
129 });
130 });
131
132 </script>
The console.log matches a property in the object and displays... but my "if" statement fails.
I was trying to copy the contents of my console.log to paste in here but haven't been successful yet.
Any tips on how i can test the value of the button class and then alter the text color in the Package field would be appreciated
Thanks.
EDIT 1
So I changed the each function to look for the btn-danger class ... and that seems to work better because it filters more results.
But I guess I still need help changing the sibling td with the class "package" to display text in red.
122 <script>
123 $( document ).ready(function() {
124 $('.btn-danger').each(function(i, n) {
125 console.log($(n.innerHTML));
126 if ($(n.innerHTML) == "button.btn.btn-danger") {
127 alert('red!!');
128 };
129 });
130 });
131
132 </script>

You can use :has selector to filter all cells with class status_button having the button you are looking for.
In order to change the color of cell with class package you can use siblings.
The snippet:
$(function () {
$('.status_button:has("button.btn.btn-danger")').each(function(index, element) {
$(element).siblings('.package').css('color', 'red');
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table class="table table-striped" id="status">
<thead>
<tr>
<th>Name</th>
<th>REP</th>
<th>Package</th>
<th> CV</th>
<th>Latest CV</th>
<th>Custom</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfasdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">tmm</td>
<td>tmm-4.2.7-r1</td>
<td>4.2.7-r1</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-success"></button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">a-cis</td>
<td>a-cis-0.1.0-r0</td>
<td>0.1.0-r0</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-danger"></button>
</td>
</tr>
</tbody>
</table>

If you'd like to use jQuery, instead use the search for .btn-danger. It's simpler and does exactly what you want.
$(document).ready(function() {
$('.btn-danger').each(function(i, n) {
var thisRow = n.closest('tr');
$(thisRow).css("color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="status">
<thead>
<tr>
<th>Name</th>
<th>REP</th>
<th>Package</th>
<th> CV</th>
<th>Latest CV</th>
<th>Custom </th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfasdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">tmm</td>
<td>tmm-4.2.7-r1</td>
<td>4.2.7-r1</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-success"></button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">a-cis</td>
<td>a-cis-0.1.0-r0</td>
<td>0.1.0-r0</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-danger"></button>
</td>
</tr>
</tbody>
</table>

How to pass text from view to javascript

Hi there i have problem with Rails & Javascript. Here is my table in view.
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr id="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr id="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
and my JS is
$('#select_name').click(function(event){
var username = $("#select_name").text();
console.log(username);
});
I have lot of names in my table, but JS printed first name in console. How can I print each name in the table to console?

You are creating in the each-loop N links (by the number of users) with the same select_name ID. Your javascript is confused, which one to choose. Try to add user id to your html select_name id and adjust your javascript accordingly. Same about your other id adminrow.
OR simply change your select_name to be a class and not id:
....
%a{:href=>"#", :class=>"select_name"}=u.firstname
....
$('.select_name').click(function(event){ ....
Ok, I am attaching the full code for you. For me it works just fine. E.g. prints just the name after clicking on the corresponding link:
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr class="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr class="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('.select_name').click(function(event){
var username = $(this).text();
console.log(username);
});
</script>

how can i place a specific row(based on column value) always at bottom of table with ng-table?

I am new to AngularJs and ng-table, I tried to sort the ng-table with the sortable attribute its working fine but I had a row with the final result, here how can I use sortable with out impact on a specific row?
<table ng-table="tableParams" ng-model="Controller.data" class="table" show-filter="true">
<tr ng-if="entry.task_name!='Totals'" ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data">
<td data-title="'Task Name'" sortable="'taskName'" filter="{ 'taskName': 'text' }"><div ng-show="entry.taskName!=false">{{entry.taskName}}</div></td>
<td data-title="'Planned Hours'" sortable="'plannedHours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr ng-if="entry.task_name ==='Totals'" ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data">
<td data-title="'Task Name'" >{{entry.taskName}}</td>
<td data-title="'Planned Hours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr>
<td ng-show="repCtrl.noData" ng-bind="repCtrl.noData"></td>
</tr>
</table>

did you try to put this row in <tfoot>?
<table ng-table="tableParams" ng-model="Controller.data" class="table" show-filter="true">
<tbody>
<tr ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data | filter: myFilter">
<td data-title="'Task Name'" sortable="'taskName'" filter="{ 'taskName': 'text' }">
<div ng-show="entry.taskName!=false">{{entry.taskName}}</div>
</td>
<td data-title="'Planned Hours'" sortable="'plannedHours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr>
<td ng-show="repCtrl.noData" ng-bind="repCtrl.noData"></td>
</tr>
</tbody>
<tfoot>
<tr ng-repeat="entry in $data | filter: {taskName:'Totals'}">
<td>{{entry.taskName}}</td>
<td>{{entry.plannedHours}}</td>
<td></td>
</tr>
</tfoot>
</table>
<script>
$scope.myFilter = function (item) {
return item.taskName !== 'Totals';
};
</script>
my plnkr with different data, but working as you expected: http://plnkr.co/edit/Rx7Kqp?p=preview

Categories

Resources