I am making fixed header table with vertical and horizontal scroll using a github project.
I am able to implement the basic template. Incase when I have some hidden table headers, I need to make some changes while passing the data to colModal of the function. I've made those changes. But I am unable to replicate(to match as in first fiddle) the data sent to colModal.
HTML
<table id="mytable">
<thead>
<tr>
<th style="width:40px;display:none">Head1</th>
<th style="width:50px">Head2</th>
<th style="width:60px">Head3</th>
<th style="width:70px">Head4</th>
<th style="width:80px">Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
<tr>
<td style="display:none">1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
</tr>
</tbody>
</table>
Jquery
var listWidth = $("#mytable tr th").map(function() {
if ($(this).is(":visible")) {
retu this.style.width;
}
}).get();
var viewData = {
thsVisible: []
};
for (var i = 0; i < listWidth.length; i++) {
var jsonData = {
width: listWidth[i].slice(0, -2),
align: 'left'
};
viewData.thsVisible.push(jsonData);
}
console.log(viewData);
$('#mytable').fxdHdrCol({
fixedCols: 0,
width: "100%",
height: 100,
colModal: viewData
});
colModal
colModal: [{width: 30, align: 'center'},
{width: 70, align: 'center'},
{width: 200, align: 'left'},
{width: 100, align: 'center'},
{width: 70, align: 'center'},
]
Template fiddle when have hidden tds
Getting an error as Uncaught TypeError: Caot read property 'width' of undefined. I need to match the viewData with ColModal.
