Raviteja Raviteja - 16 days ago 5
CSS Question

How to form a JSON array using 1d array?

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")) {
return 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
});


Template fiddle

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. In this fiddle if you observe,First
td
is hidden but it's width is applied to 2nd
td
and 2nd
td's
width to 3rd and it followed, Which I am trying to avoid using the above javascript. So I am fetching the width from inline css which are not hidden.

Fiddle I struck with

Getting an error as
Uncaught TypeError: Cannot read property 'width' of undefined
. I need to match the
viewData
with
ColModal
.

Answer

Please try with this Jquery

var listWidth = $("#mytable tr th").map(function() {
  if ($(this).is(":visible")) {
    return this.style.width;
  }
  else{
  return "0px";
  }
}).get();
var viewData = {
  thsVisible: []
};
for (var i = 0; i < listWidth.length; i++) {
  var jsonData = {
    width: parseInt(listWidth[i].slice(0, -2)),
    align: 'left'
  };
  viewData.thsVisible.push(jsonData);
}
console.log(viewData);
$('#mytable').fxdHdrCol({
    fixedCols:  0,
    width:     "100%",
    height:    100,
    colModal: viewData.thsVisible
});

Hope it will fix the issue.

Comments