[英]Select 2 columns of an HTML table based on the first column selected
我有一个带有7列的HTML表。 当我选择一列时,我希望所有其他列都被隐藏,但所选列旁边的列除外。 为了清楚起见,一次只需要显示2列-就是选中的那一列和其旁边的那一列。 如果所选列的右侧有一列,则该列应与所选列一起显示;如果没有(最后一列,则应与所选列一起显示)。
我尝试使用循环,但问题是用户可以从表中选择任何列。
我的代码:
var I = document.getElementsByTagName("th").length;
if(s=== I-1) { // s - index of selected column- check if its the last column
for (var D = 0; D < I-2; D++) {
var o = datatable.column(D);
o.visible(!o.visible());
}
} else {
for (var D = 0; D < s; D++) {
var o = datatable.column(D);
o.visible(!o.visible());
}
for (var D = s+1; D < I; D++) {
var o = datatable.column(D);
o.visible(!o.visible());
}
}
我的HTML:
<table id="DataTables_Table_0" >
<thead>
<tr role="row" style="height: 0px;">
<th>
<div>Pro</div>
</th>
<th>
<div>Pri</div>
</th>
<th>
<div>State</div>
</th>
<th>
<div>phyId</div>
</th>
<th>
<div>Title</div>
</th>
<th>
<div>Origin</div>
</th>
<th>
<div>type</div>
</th>
</tr>
</thead>
<tbody style="">
<tr role="row" class="odd">
<td class="0 sorting_1">Private</td>
<td class="1">High</td>
<td class="2">Create</td>
<td class="3">E210DC29509F</td>
<td class="4">5</td>
<td class="5">8/9/2019, 8:24:00 AM</td>
<td class="6">Issue</td>
</tr>
<tr role="row" class="even">
<td class="0 sorting_1">Public</td>
<td class="1">Low</td>
<td class="2">Assign</td>
<td class="3">E210DC29509F</td>
<td class="4">5</td>
<td class="5">8/9/2019, 9:11:11 AM</td>
<td class="6">Issue</td>
</tr>
<tr role="row" class="odd">
<td class="0 sorting_1">Private</td>
<td class="1">Medium</td>
<td class="2">Assign</td>
<td class="3">E210DC29509F</td>
<td class="4">5</td>
<td class="5">8/9/2019, 9:17:26 AM</td>
<td class="6">Issue</td>
</tr>
<tr role="row" class="even">
<td class="0 sorting_1">Public</td>
<td class="1">Urgent</td>
<td class="2">Active</td>
<td class="3">E210DC29509F</td>
<td class="4">5</td>
<td class="5">8/8/2019, 4:14:59 PM</td>
<td class="6">Issue</td>
</tr>
</tbody>
</table>
问题的更新:我可以始终选择第1列与用户选择的列。 因此,这意味着我不必从表中手动选择相邻的列。 我刚刚修改了代码:
for (var D = 1; D < I/2 ; D++) {
if (D !== s ) {
var o = f.datatable.column(D);
o.visible(!o.visible());
}
}
现在它可以按预期工作了。 实际上,这是为表格数据生成折线图。 现在,我得到了一个折线图,但是对于折线图是否确实符合预期,我感到困惑。 我的意思是我已经附上了折线图的屏幕截图,但是看起来还有很多事情要做。 对不起,我没有提到折线图,因为我认为这会使问题变得更加复杂和混乱。 应用于LineChart 资料表的线图表
折线图应该如何与我的表格一起显示。
我将使这些td类名称更明确,以便它们清楚地标记列(如col-0
),然后基于这些名称查询DOM。
选择更改时:
这是一些(未经测试的)示例js:
$('th, td').hide();
// for the OP: make sure colIndex isn't the rightmost col
const selectedCol = 'col-' + colIndex;
const nextCol = 'col-' + (colIndex + 1);
$('.' + selectedCol).show();
$('.' + nextCol).show();
获取所有列的计数。 然后隐藏所有列。 然后仅显示选定的,下一列或上一列
var I = document.getElementsByTagName("th").length; function hideCol(s){ datatable.columns( 'th' ).visible( false ); if(s == I-1){ datatable.column(s).visible(true); datatable.column(s-1).visible(true); }else if(s < I){ datatable.column(s).visible(true); datatable.column(s+1).visible(true); } } hideCol(2);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.