Develop Reference

Show button on one row table

I have table:
<table class="table table-condensed">
<thead>
<tr>
<th>id</th>
<th>task</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tasks">
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.id}}</td>
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.text}}<button v-if="showBatton">Test</button></td>
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"> {{row.date_current}}</td>
<td span #mouseover="showButtonFunction" #mouseleave="hideButtonFunction"><button v-if="showBatton">Test</button></td>
</tr>
</tbody>
</table>
As intended, the button should appear on the line on which the mouse is hovering.
But now it appears on all visible lines.
Script:
data:{
showBatton:false,
},
showButtonFunction(){
// this.title="dsds2"
console.log("test")
this.showBatton=true;
},
hideButtonFunction(){
this.showBatton=false;
}
How to implement it?

You can do this with css only:
// CSS
tr button {
display: none;
}
tr:hover button {
display: inline-block;
}
// HTML
<tr v-for="row in tasks">
<td span>{{row.id}}</td>
<td span>{{row.text}}<button>Test</button></td>
<td span>{{row.date_current}}</td>
<td span><button>Test</button></td>
</tr>

You can do it Using VueJS Also Like:
<div id="app">
<table class="table table-condensed">
<thead>
<tr>
<th>id</th>
<th>task</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tasks" #mouseover="showButtonFunction(row.id)" #mouseleave="hideButtonFunction" :key="row.id">
<td>{{row.id}}</td>
<td>{{row.text}}<button v-show="buttonIndex === row.id">Test</button></td>
<td>{{row.date_current}}</td>
<td><button v-show="buttonIndex === row.id">Test</button></td>
</tr>
</tbody>
</table>
</div>
JS Code:
var vue = new Vue({
el: '#app',
data:{
buttonIndex: false,
tasks: [
{
id: 1,
text: "Hello",
date_current: new Date()
},
{
id: 2,
text: "Hello2",
date_current: new Date()
},
{
id: 3,
text: "Hello3",
date_current: new Date()
}
]
},
methods:{
showButtonFunction(id){
// this.title="dsds2"
this.buttonIndex=id;
},
hideButtonFunction(){
this.buttonIndex=false;
}
}
})
Check this Link :)

Tablesorter Child Row always shows for every search filter

The email row is the parent. And the address is the child row.
The childRows are displayed for every search filter keyword.
My aim is to simply filter childRows and show only the matching childRows with Parent Rows as output.
Can someone please help me in figuring out where the problem is.
HTML code:
<div class="form-control divCheckBox">
<div class="tableFilterLink" data-table="selectedTableFilter">
<i class="icon-filter"></i>
<a>Show Filters</a>
</div>
<table id="selectedTableFilter" class="table table-bordered table-striped">
<thead>
<tr>
<th>Selected Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>dffbach#yahoo.com</td>
</tr>
<tr>
<td>kjjdoe#hotmail.com</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
</td>
</tr>
<tr>
<td>pootconway#earthlink.net</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>99700 Bell Road<br>Auburn, California 95603</div>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
$("#selectedTableFilter").tablesorter({
debug: true,
headerTemplate: "{content}<b></b>",
cssChildRow : "tablesorter-childRow",
widgets: ["zebra","filter"],
sortInitialOrder: "asc",
sortList: [[0,0]],
sortRestart: true,
widgetOptions: {
filter_hideFilters: true,
zebra : ['normal-row', 'alt-row' ],
filter_childRows: true,
filter_cssFilter : 'tablesorter-filter',
filter_startsWith: false,
filter_ignoreCase : true,
filter_childWithSibs: false,
},
widthFixed: true
});

Thanks #Mottie
Github Issue link
If you are using a custom theme for tablesorter, please make sure that the following definition is included:
.tablesorter-filter {
display: none;
}
JSFIDDLE

How to use inline editing in angular Js without any buttons in the rows

I have below table,
<div class="md-dialog-main">
<table class="me-hours-table">
<thead>
<th>Product Type</th>
<th>Product Name</th>
<th>
<select>
<option style="background-color:'#FF0000'">weight</option>
<option style="background-color:'#FF0000'">size</option>
</select>
</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr ng-repeat="data in variants">
<td>{{data.type}}</td>
<td>{{data.name}}</td>
<td>{{data.size}}</td>
<td>{{data.price}}</td>
<td>{{data.qty}}</td>
</tr>
</tbody>
</table>
</div>
The controlling part which take the data is as below,
$scope.idDetails = function(product){
var ids={
mainId : product.mainId,
childId : product.childId
};
console.log(ids.childId);
commerceService.getVariants(ids.childId).
success(function(data) {
toastr.success('Successfully saved', 'Awsome!', {
closeButton: true
});
$scope.variants=[{
type: "cloth",
name: data[0].name,
size: "10",
price: data[0].price,
qty: "1"
}];
console.log($scope.variants.name);
}).error(function(err) {
toastr.error('Saving detals was not Successful', 'Warning', {
closeButton: true
});
});
}
Everything works fine, but I want to use a Angular Js inline editor to edit the rows in the table. First the user can see the data which I get from the controller, then the user should be able to edit the rows. I have searched through the internet but I found inline editing tables which use button to edit and save. I don't want any buttons in my table rows. I want to bind data with the model. So that at the end I can take the data from the table via the model. Please help

After searching in many areas I found an inline edit that do not need any button to edit. The code is as below,
<div class="md-dialog-main">
<table class="me-hours-table">
<thead>
<th>Product Type</th>
<th>Product Name</th>
<th>
<select ng-model="selection">
<option value="weight">weight</option>
<option value="size">size</option>
</select>
</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr ng-repeat="data in variants">
<td
inline-edit="data.sku"
inline-edit-callback="skuUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
ng-model="data.name">{{data.name}}</td>
<td
inline-edit="data.sizeOrweight"
inline-edit-callback="sizeUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
inline-edit="data.price"
inline-edit-callback="priceUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
inline-edit="data.qty"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
</tr>
<td
inline-edit-callback="qtyUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
</tr>
</tbody>
</table>
</div>
The controller is as below,
$scope.skuUpdateHandler = function(newValue) {
console.log(newValue);
};
$scope.sizeUpdateHandler = function(newValue) {
console.log(newValue);
};
$scope.priceUpdateHandler = function(newValue) {
console.log(newValue);
};
Please install ng-inline-edit to use this method. Click
https://github.com/tameraydin/ng-inline-edit to install ng-inline-edit

add multiple rows in one column using angular ng-repeat

I want to generate table contents using json object. I am using ng-repeat to insert multiple rows in a table. But I have to generate table like the following.
--------------
ID | subjects
--------------
| S1
1 | S2
| S3
--------------
| S4
2 | S5
| S6
--------------
my angular code is:
<tr ng-repeat = "user in users">
<td>{{user.id}}</td>
<td>{{user.subject}}</td>
</tr>
my json object is :
user:[
{id:1 ,
subjects:[
{id:1 , name:"eng"}
{id:2 , name:"phy"}
]
},
{id:2 ,
subjects:[
{id:1 , name:"eng"}
{id:3 , name:"math"}
]
}
]
I want to generate html table like this
<table>
<tr>
<td >ID</td>
<td>Sub</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>S1</td>
</tr>
<tr>
<td>S2</td>
</tr>
<tr>
<td>S3</td>
</tr>
how to insert multiple rows in one column using angular

Use ng-repeat-start and ng-repeat-end. For example:
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects">
<td>S{{subject.id}}</td>
</tr>
Here is a full example:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
var users = [{
id: 1,
subjects: [{
id: 1,
name: "eng"
}, {
id: 2,
name: "phy"
}]
}, {
id: 2,
subjects: [{
id: 1,
name: "eng"
}, {
id: 3,
name: "math"
}, {
id: 4,
name: "hist"
},
{
id: 5,
name: "geog"
}]
}];
$scope.users = users;
});
table { border-collapse: collapse; }
td { border: 1px solid Black; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
<thead>
<tr>
<td>ID</td>
<td>Subjects</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects">
<td>S{{subject.id}}</td>
</tr>
</tbody>
</table>
Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/
An alternative version, using nested ng-repeat, can be implemented using a div to display the nested subject information:
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>
<div ng-repeat="subject in user.subjects">S{{subject.id}}</div>
</td>
</tr>

rowspan will do everything you need. Follow this link:
w3schools This is one of the best resources for web development.

Using div u can also do
<div ng-repeat = "user in users">
<div> {{user.id}} </div>
<div ng-repeat = "user1 in users.subjects">
{{user1.id}} : {{user1.name}}
<div>
</div>

Donal's answer is good.
But I edited to show beautiful table:
<table class="table table-bordered table-hover table-height m-b-xs">
<thead>
<tr>
<td>ID</td>
<td>Subjects</td>
<td>name</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length}}">key {{user.id}}</td>
<td>S{{ user.subjects[0].id }}</td>
<td>{{ user.subjects[0].name }}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects.slice(1)">
<td>S{{subject.id}}</td>
<td>{{subject.name}}</td>
</tr>
</tbody>

Generate html table using angular

I want to generate html table using angular.I have a json object and i used ng-repeat to add multiple rows. But my table structure is different.
I want to generate table structure like this:
<table>
<tr>
<td >ID</td>
<td>Sub</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>S1</td>
</tr>
<tr>
<td>S2</td>
</tr>
<tr>
<td>S3</td>
</tr>
</table>
--------------
ID | subjects
--------------
| S1
--------
1 | S2
--------
| S3
--------------
| S4
--------
2 | S5
--------
| S6
--------------
user:[
{id:1 ,
subjects:[
{id:1 , name:"eng"}
{id:2 , name:"phy"}
]
},
{ id:2 ,
subjects:[
{id:1 , name:"eng"}
{id:3 , name:"math"}
]
}
]
my angular code is:
<tr ng-repeat = "user in users">
<td>{{user.id}}</td>
<td>{{user.subject}}</td>
</tr>
I want to know how to generate table structure like above

You need to use ng-repeat-start and ng-repeat-end. For example:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
var users = [{
id: 1,
subjects: [{
id: 1,
name: "eng"
}, {
id: 2,
name: "phy"
}]
}, {
id: 2,
subjects: [{
id: 1,
name: "eng"
}, {
id: 3,
name: "math"
}]
}];
$scope.users = users;
});
table { border-collapse: collapse; }
td { border: 1px solid Black; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="MyApp" ng-controller="MyController">
<thead>
<tr>
<td>ID</td>
<td>Subjects</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in users">
<td rowspan="{{user.subjects.length+1}}">{{user.id}}</td>
</tr>
<tr ng-repeat-end ng-repeat="subject in user.subjects">
<td>S{{subject.id}}</td>
</tr>
</tbody>
</table>
Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/

Similar to the nested structure of your object, you can nest your ng-repeats like this...
<tr ng-repeat = "user in users">
<td>{{user.id}}</td>
<td ng-repeat="subject in user.subjects">{{subject.name}}</td>
</tr>

I split your JSON and push it into two $scope variable, like the below:
angular.forEach($scope.user, function(user) {
$scope.userDetails.push({
userId: user.id,
});
angular.forEach(user.subjects, function(subject) {
$scope.subjectDetails.push({
userId: user.id,
subjectName: subject.name
});
});
});
In the HTML, I am using filter to filter by user's id.
<table>
<thead>
<tr>
<th style="width: 50px">ID</th>
<th style="width: 75px">Subjects</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userDetails">
<td><span ng-bind="user.userId"></span>
</td>
<td>
<table>
<tr ng-repeat="sub in subjectDetails | filter: {userId: user.userId}">
<td>
<div ng-bind="sub.subjectName"></div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This is also one of the way to achieve this.
Sample Plunker

Here, I'm assuming that you want each user in users (in your JSON object) in one table, so you can do something as follows:
<table ng-repeat="user in users">
<tr>
<td>{{user.id}}</td>
<td>Subjects</td>
</tr>
<tr ng-repeat="subject in user.subjects">
<td>{{subject.id}}</td>
<td>{{subject.name}}</td>
</tr>
</table>
Adjust the html accordingly based on your needs, but this is the basic idea :)
Hope this helps!

add users object in $scope.
$scope.users=[
{id:1 ,
subjects:[
{id:1 , name:"eng"}
{id:2 , name:"phy"}
]
},
{ id:2 ,
subjects:[
{id:1 , name:"eng"}
{id:3 , name:"math"}
]
}
]
Here is the html.
<table border="1">
<tr>
<th> ID </th>
<th> subjects </th>
</tr>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td><table>
<tr ng-repeat="subject in user.subjects">
<td>{{subject.name}}</td>
</tr>
</table></td>
</tr>
</table>
Here is the plunker