根据TD id隐藏表列
Hide table column based on TD id
我有一个html页面,其中包含这个动态生成的表,我需要用javascript对某些td Id(如"Id_Position"、"Id_Equipe"answers"Id_Vehicule")隐藏整个列。我该怎么做?
<table width="100%">
<tbody>
<tr class="HeaderRow">
<td id="Id_Position" align="left" width="25">P</td>
<td id="Id_Numero" align="left" width="25">No.</td>
<td id="Id_Perso1" align="left" width="80">Driver</td>
<td id="Id_Equipe" align="left" width="190">Team</td>
<td id="Id_Vehicule" align="left" width="60">Model</td>
<td id="Id_NbTour" align="left" width="25">L</td>
<td id="Id_TpsCumule" align="left" width="85">Total time</td>
<td id="Id_VitesseMoyTotal" align="left" width="30">Avg</td>
<td id="Id_Ecart1er" align="left" width="35">Gap</td>
<td id="Id_EcartPrec" align="left" width="50">PGap</td>
<td id="Id_MeilleurTour" align="left" width="50">Best</td>
<td id="Id_AuTour" align="left" width="25">In</td>
<td id="Id_Inter1" align="left" width="45">S1</td>
<td id="Id_MeilleurInter1" align="left" width="45">BS1</td>
<td id="Id_Inter2" align="left" width="45">S2</td>
<td id="Id_MeilleurInter2" align="left" width="45">BS2</td>
<td id="Id_Inter3" align="left" width="45">S3</td>
<td id="Id_MeilleurInter3" align="left" width="45">BS3</td>
<td id="Id_TpsTour" align="left" width="50">Laptime</td>
<td id="Id_NbStand" align="left" width="20">P</td>
<td id="Id_PositionDepart" align="left" width="20">StartP</td>
</tr>
<tr class="OddRow">
<td align="left" class="">1</td>
<td align="left" class="">65</td>
<td align="left" class="">MAX</td>
<td align="left" class="">Eurofarma RC</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:06.567</td>
<td align="left" class="">126.42</td>
<td align="left" class="">-</td>
<td align="left" class="">-</td>
<td align="left" class="">55.487</td>
<td align="left" class="">23</td>
<td align="left" class="BestTime">15.572</td>
<td align="left" class="">15.572</td>
<td align="left" class="">-</td>
<td align="left" class="">16.086</td>
<td align="left" class="">21:55.535</td>
<td align="left" class="">24.066</td>
<td align="left" class="">56.208</td>
<td align="left" class="">0</td>
<td align="left" class="">1</td>
</tr>
<tr class="EvenRow">
<td align="left" class="">2</td>
<td align="left" class="">0</td>
<td align="left" class="">CBU</td>
<td align="left" class="">Red Bull Racing</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:07.910</td>
<td align="left" class="">126.32</td>
<td align="left" class="">1.343</td>
<td align="left" class="">1.343</td>
<td align="left" class="">55.590</td>
<td align="left" class="">10</td>
<td align="left" class="">15.977</td>
<td align="left" class="">15.711</td>
<td align="left" class="">-</td>
<td align="left" class="">16.126</td>
<td align="left" class="">6:57.520</td>
<td align="left" class="">24.183</td>
<td align="left" class="">56.293</td>
<td align="left" class="">0</td>
<td align="left" class="">6</td>
</tr>
</tbody>
</table>
Vanilla JS解决方案,来源于此处。无需其他标记:
document.onreadystatechange = function() {
hide();
};
function show_hide_column(col_id, do_show) {
var stl;
if (do_show) stl = 'block'
else stl = 'none';
var tbl = document.getElementsByTagName('table')[0];
var index = document.getElementById(col_id).cellIndex;
var rows = tbl.getElementsByTagName('tr');
for (var row = 0; row < rows.length; row++) {
var cels = rows[row].getElementsByTagName('td')
cels[index].style.display = stl;
}
}
function hide() {
show_hide_column("Id_Position", false);
show_hide_column("Id_Equipe", false);
show_hide_column("Id_Vehicule", false);
}
<table width="100%" border=1>
<tbody>
<tr class="HeaderRow">
<td id="Id_Position" align="left" width="25">P</td>
<td id="Id_Numero" align="left" width="25">No.</td>
<td id="Id_Perso1" align="left" width="80">Driver</td>
<td id="Id_Equipe" align="left" width="190">Team</td>
<td id="Id_Vehicule" align="left" width="60">Model</td>
<td id="Id_NbTour" align="left" width="25">L</td>
<td id="Id_TpsCumule" align="left" width="85">Total time</td>
<td id="Id_VitesseMoyTotal" align="left" width="30">Avg</td>
<td id="Id_Ecart1er" align="left" width="35">Gap</td>
<td id="Id_EcartPrec" align="left" width="50">PGap</td>
<td id="Id_MeilleurTour" align="left" width="50">Best</td>
<td id="Id_AuTour" align="left" width="25">In</td>
<td id="Id_Inter1" align="left" width="45">S1</td>
<td id="Id_MeilleurInter1" align="left" width="45">BS1</td>
<td id="Id_Inter2" align="left" width="45">S2</td>
<td id="Id_MeilleurInter2" align="left" width="45">BS2</td>
<td id="Id_Inter3" align="left" width="45">S3</td>
<td id="Id_MeilleurInter3" align="left" width="45">BS3</td>
<td id="Id_TpsTour" align="left" width="50">Laptime</td>
<td id="Id_NbStand" align="left" width="20">P</td>
<td id="Id_PositionDepart" align="left" width="20">StartP</td>
</tr>
<tr class="OddRow">
<td align="left" class="">1</td>
<td align="left" class="">65</td>
<td align="left" class="">MAX</td>
<td align="left" class="">Eurofarma RC</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:06.567</td>
<td align="left" class="">126.42</td>
<td align="left" class="">-</td>
<td align="left" class="">-</td>
<td align="left" class="">55.487</td>
<td align="left" class="">23</td>
<td align="left" class="BestTime">15.572</td>
<td align="left" class="">15.572</td>
<td align="left" class="">-</td>
<td align="left" class="">16.086</td>
<td align="left" class="">21:55.535</td>
<td align="left" class="">24.066</td>
<td align="left" class="">56.208</td>
<td align="left" class="">0</td>
<td align="left" class="">1</td>
</tr>
<tr class="EvenRow">
<td align="left" class="">2</td>
<td align="left" class="">0</td>
<td align="left" class="">CBU</td>
<td align="left" class="">Red Bull Racing</td>
<td align="left" class="">Chevrolet</td>
<td align="left" class="">26</td>
<td align="left" class="">00:28:07.910</td>
<td align="left" class="">126.32</td>
<td align="left" class="">1.343</td>
<td align="left" class="">1.343</td>
<td align="left" class="">55.590</td>
<td align="left" class="">10</td>
<td align="left" class="">15.977</td>
<td align="left" class="">15.711</td>
<td align="left" class="">-</td>
<td align="left" class="">16.126</td>
<td align="left" class="">6:57.520</td>
<td align="left" class="">24.183</td>
<td align="left" class="">56.293</td>
<td align="left" class="">0</td>
<td align="left" class="">6</td>
</tr>
</tbody>
</table>
如果您可以利用col标签,那么纯javascript的解决方案非常简单:
<table id='id_of_table' border=1>
<col class="col1"/>
<col class="col2"/>
<col class="col3"/>
<col class="col4"/>
<tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
<tr><td> 2</td><td> two</td><td> deux</td><td> zwei</td></tr>
<tr><td> 3</td><td> three</td><td> trois</td><td> drei</td></tr>
<tr><td> 4</td><td> four</td><td>quattre</td><td> vier</td></tr>
<tr><td> 5</td><td> five</td><td> cinq</td><td>fünf</td></tr>
<tr><td> 6</td><td> six</td><td> six</td><td> sechs</td></tr>
</table>
您可以仅将几个css属性应用于col,但可见性是之一
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var col = tbl.getElementsByTagName('col')[col_no];
if (col) {
col.style.visibility=do_show?"":"collapse";
}
}
供参考:http://www.dotnetlearners.com/javascript/hide%20table%20column%20using%20javascript.aspx
尝试以下操作:
$(document).ready(function() {
$("#Id_Position,#Id_Equipe,#Id_Vehicule").hide();
}
var header = document.querySelector('#' + yourID),
index = Array.prototype.indexOf.call(header.parentNode.childNodes, header);
header.style.display = 'none';
document.querySelector('.OddRow').childNodes[index].style.display = 'none';
document.querySelector('.EvenRow').childNodes[index].style.display = 'none';
注意:如果您在点击/change等事件后隐藏,则该事件将具有一个目标属性,该属性也将为您提供头节点,而不是使用document.querySelector
如果不确定这是否正确,我会找到当前列的索引,并将其应用于所有行。
var id = "";
var targetEl = document.getElementById(id);
var targetIndex = 0;
while((targetEl=targetEl.previousSibling)!=null) ++targetIndex;
// return index of targeted td
var allRow = document.getElementByTagName('tr')
var rowLength = allRow.length;
for(i=0; i<rowLength; i++) {
allRow[i].childNodes[targetIndex].style.display = "none";
}
相关文章:
- 使用类而不是id在JavaScript中隐藏显示
- Bootstrap使用复选框显示和隐藏id
- 使用网格ID隐藏剑道网格工具栏
- JS在隐藏未定义的值后仅从数组中返回第一个id的值
- 在代码隐藏 (asp.net VB) 中返回“完整”客户端 ID
- 使用 JQuery 隐藏没有数据(包括标头)且具有相同表 ID 的列
- 使用AJAX发送隐藏的ID输入字段
- 无法访问字段'通过aspx页面上的javascript函数传递来自代码隐藏中函数调用的客户端id的s值(页面加载
- jQuery-如何从同一类中隐藏的输入id中获取不同的值
- Javascript条件-不隐藏ID
- 如何根据给定的 ID 隐藏和显示信息
- 具有一个#id的多选选项可显示n个隐藏表
- 指向“”的超链接;隐藏的“;jQuery Toggler内部的内容(特定的#id)
- 如何从URL隐藏ID
- 单击功能时切换隐藏ID,再次切换功能时显示
- 如何使用自动完成jquery放置隐藏id
- 如何隐藏#id对象
- 隐藏id大于$number的行
- 通过jquery动态隐藏id
- 是否可以在某些浏览器中隐藏id元素