<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery@*"></script>
<script data-require="lodash.js@*" data-semver="3.1.0" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.1.0/lodash.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/f2c75b7247b/api/fnFakeRowspan.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<table id="pastPresidents">
<thead>
<tr>
<th>NAME</th>
<th>YEAR</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Creed Ford</td>
<td>2013</td>
</tr>
<tr>
<td class="hide">Creed Ford</td>
<td>2016</td>
</tr>
<tr>
<td>Jose Chavez</td>
<td>2015</td>
</tr>
<tr>
<td rowspan="3">Lindsey Bock</td>
<td>2012</td>
</tr>
<tr>
<td class="hide">Lindsey Bock</td>
<td>2013</td>
</tr>
<tr>
<td class="hide">Lindsey Bock</td>
<td>0</td>
</tr>
<tr>
<td>Luis Muñoz</td>
<td>2014</td>
</tr>
</tbody>
</table>
<table id="pastPresidents2">
<thead>
<tr>
<th>NAME</th>
<th>YEAR</th>
</tr>
</thead>
<tbody>
<tr>
<td>Creed Ford</td>
<td>2013</td>
</tr>
<tr>
<td>Creed Ford (1)</td>
<td>2016</td>
</tr>
<tr>
<td>Jose Chavez</td>
<td>2015</td>
</tr>
<tr>
<td>Lindsey Bock</td>
<td>2012</td>
</tr>
<tr>
<td>Lindsey Bock (1)</td>
<td>2013</td>
</tr>
<tr>
<td>Lindsey Bock (2)</td>
<td>0</td>
</tr>
<tr>
<td>Luis Muñoz</td>
<td>2014</td>
</tr>
</tbody>
</table>
</body>
</html>
// Code goes here
$(document).ready(function(){
$('#pastPresidents2').DataTable();
var data = [];
$('#pastPresidents2 td').each(function()
{
var $this = $(this);
var index = $this.index();
var txt = $this.text();
//console.log(this);
//console.log(index);
if (index == 0) {
var item = _.find(data, function(o) {
//return o.v == txt;
return txt.indexOf(o.v) != -1;
});
if (item) {
item.t = item.t + 1;
item.o.attr('rowspan', item.t).removeClass('hide');
$this.addClass('hide');
}else{
data.push({
i: index,
t: 1,
o: $this,
v: txt
});
//$this.addClass('hide');
}
}
});
console.log(data);
});
/* Styles go here */
.hide{
display:none;
}