<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Cell merge in table!</h1>
<div ng-controller="cellMergeCtrlSimple">
<table style="width: 50%;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email ID</th>
<th>Position</th>
</tr>
<tr ng-repeat="item in list">
<td rowspan="{{item.idRs}}" colspan="{{item.idCs}}"
ng-show="testCondition(item.id) && filterSpans($index+1,item)" style="text-align: center">{{item.id}}</td>
<td rowspan="{{item.nameRs}}" colspan="{{item.nameCs}}"
ng-show="testCondition(item.name) && filterSpans($index+1,item)" style="text-align: center">{{item.name}}</td>
<td rowspan="{{item.emailRs}}" colspan="{{item.emailCs}}"
ng-show="testCondition(item.email) && filterSpans($index+1,item)" style="text-align: center">{{item.email}}</td>
<td rowspan="{{item.positionRs}}" colspan="{{item.positionCs}}"
ng-show="testCondition(item.position) && filterSpans($index+1,item)" style="text-align: center">{{item.position}}</td>
</tr>
</table>
</div>
<br/>
<table style="width: 50%;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email ID</th>
<th>Position</th>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">1-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Rohith</td>
<td colspan="1" rowspan="1" style="text-align: center">rohith@a.com</td>
<td colspan="1" rowspan="1" style="text-align: center">SE</td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">2-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Sujay</td>
<td colspan="1" rowspan="1" style="text-align: center">sujay@b.com</td>
<td colspan="1" rowspan="1" style="text-align: center">CEO</td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">3-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Shiju</td>
<td colspan="1" rowspan="1" style="text-align: center">shiju@c.com</td>
<td colspan="1" rowspan="1" style="text-align: center">SSE</td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">4-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Rohit</td>
<td colspan="1" rowspan="1" style="text-align: center">rohith@d.com</td>
<td colspan="1" rowspan="1" style="text-align: center">ASE</td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">5-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Pawan</td>
<td colspan="1" rowspan="1" style="text-align: center">pawan@e.com</td>
<td colspan="1" rowspan="1" style="text-align: center">SSE</td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">6-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Kishu</td>
<td colspan="1" rowspan="1" style="text-align: center">kishu@f.com</td>
<td colspan="1" rowspan="1" style="text-align: center">GL</td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">7-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Praveen</td>
<td colspan="1" rowspan="1" style="text-align: center">praveen@g.com</td>
<td colspan="1" rowspan="1" style="text-align: center">PM</td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="text-align: center">8-A</td>
<td colspan="1" rowspan="1" style="text-align: center">Karan</td>
<td colspan="1" rowspan="1" style="text-align: center">karan@h.com</td>
<td colspan="1" rowspan="1" style="text-align: center">SE</td>
</tr>
</table>
</body>
</html>
(function() {
'use strict';
var app = angular.module('app', []);
//simple cell merge
app.controller('cellMergeCtrlSimple', ['$scope',
function($scope) {
//Start First Solution
$scope.list = [{
id: '1-A',
idRs: 1,
idCs: 1,
name: 'Rohith',
nameRs: 1,
nameCs: 1,
email: 'rohith@a.com',
emailRs: 1,
emailCs: 1,
position: 'SE',
positionRs: 1,
positionCs: 1
}, {
id: '2-A',
idRs: 1,
idCs: 1,
name: 'Sujay',
nameRs: 1,
nameCs: 1,
email: 'sujay@b.com',
emailRs: 1,
emailCs: 1,
position: 'CEO',
positionRs: 1,
positionCs: 1
}, {
id: '3-A',
idRs: 1,
idCs: 1,
name: 'Shiju',
nameRs: 1,
nameCs: 1,
email: 'shiju@c.com',
emailRs: 1,
emailCs: 1,
position: 'SSE',
positionRs: 1,
positionCs: 1
}, {
id: '4-A',
idRs: 1,
idCs: 1,
name: 'rohit',
nameRs: 1,
nameCs: 1,
email: 'rohith@d.com',
emailRs: 1,
emailCs: 1,
position: 'ASE',
positionRs: 1,
positionCs: 1
}, {
id: '5-A',
idRs: 1,
idCs: 1,
name: 'Pawan',
nameRs: 1,
nameCs: 1,
email: 'pawan@e.com',
rowspan: 1,
emailCs: 1,
position: 'SSE',
positionRs: 1,
positionCs: 1
}, {
id: '6-A',
idRs: 1,
idCs: 1,
name: 'Kishu',
nameRs: 1,
nameCs: 1,
email: 'kishu@f.com',
emailRs: 1,
emailCs: 1,
position: 'GL',
positionRs: 1,
positionCs: 1
}, {
id: '7-A',
idRs: 1,
idCs: 2,
name: null,
nameRs: 1,
nameCs: 1,
email: 'praveen@g.com',
emailRs: 1,
emailCs: 1,
position: 'PM',
positionRs: 1,
positionCs: 1
}, {
id: '8-A',
idRs: 1,
idCs: 1,
name: 'Karan',
nameRs: 1,
nameCs: 1,
email: 'karan@h.com',
emailRs: 1,
emailCs: 1,
position: 'SE',
positionRs: 1,
positionCs: 1
}];
$scope.testCondition = function(data) {
if (data !== null) {
return true;
} else {
return false;
}
}
$scope.filterSpans = function(index, current) {
console.log("index is "+index);
console.log("list: "+JSON.stringify($scope.list[index].id));
console.log("Cuurent Object"+JSON.stringify(current));
return true;
}
}
]);
})();
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
Example to show dynamic table:
Based on rowspan and colspan
Technologies Used:
1. AngularJS
2. JavaScript
3. HTML
Assumption:
1. Default value of rowspan and colspan is 1.
2. Update the rowspan and colspan values are updated current and subsequest rows need to be changed.
3. If a rowspan is increased by k and colspan remains 1 then k values in the same row should be null.
4. If a colspan is increased by p and rowpan remains 1 then p-1 values in the next p-1 values in the same column should be null.
5. If a rowspan is increased by k and colspan is increased by p then p-1 values in the next p-1 values in the same column should be null + for each updated row k values should be null.
Testing:
1. Go to script.js
2. Change the value of rowspan and colspan. Follow the rules metioned in above(CASE).
Rowspan and Colspan Cases:
CASE:
1. rowspan=1 colspan=1
Remove 0 <td> from current row
Remove 0 <td> from next row
2. rowspan=2 colspan=1
Remove 0 <td> from current row
Remove 1 <td> from next row
3. rowspan=1 colspan=2
Remove 1 <td> from current row
Remove 0 <td> from next row
4. rowspan=2 colspan=2
Remove 1 <td> from current row
Remove 2 <td> from next row
5. rowspan=r colspan=c
Genralize ALGO for all cases:
for(int cs=1; cs<rowspan; cs++){
pickup next row
remove r number of <td> tags from the code
}