Скрыть столбец таблицы на основе идентификатора TD

Question

У меня есть одна html-страница с этой динамически сгенерированной таблицей, и мне нужно скрыть все столбцы от определенных идентификаторов td, таких как Id_Position, Id_Equipe и Id_Vehicule с помощью javascript. Как мне это сделать?

<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> 

Answer 1

решение Vanilla JS, получены из here и here. Ни одна другая разметка нужна:

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>

Answer 2

Попробуйте следующее:

$(document).ready(function() { 
    $("#Id_Position,#Id_Equipe,#Id_Vehicule").hide(); 
} 

Answer 3

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'; 

Примечание: Если вы прячете после нажмите/изменения/и т.д. событие, событие будет иметь целевое свойство, которое даст вам узел заголовка также, вместо того, чтобы получать его с помощью document.querySelector

Answer 4

Если вы можете использовать тег 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&uuml;nf</td></tr> 
    <tr><td> 6</td><td> six</td><td> six</td><td> sechs</td></tr> 
</table> 

Вы можете обратиться к Col только несколько атрибутов CSS, но видимость одна из них

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

Answer 5

не совсем уверен, если это правильно, я не нашел бы индекс текущего седловине, и применить его ко всем подряд.

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"; 
}