隐藏基于TD id的表列

时间：2015-06-30 14:11:30

标签： javascript html

我有一个带有动态生成的表格的html页面，我需要使用javascript隐藏某些td ID中的整列，例如“Id_Position”，“Id_Equipe”和“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>

5 个答案:

答案 0 :(得分：1)

如果您可以利用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

答案 1 :(得分：0)

尝试以下方法：

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

答案 2 :(得分：0)

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

注意：如果您在单击/更改/ etc事件后隐藏，该事件将具有一个target属性，该属性也将为您提供头节点，而不是使用document.querySelector

获取它。

答案 3 :(得分：0)

Vanilla JS解决方案，来自here和here。不需要其他标记：

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

不确定这是否正确，我会找到当前col的索引，并将其应用于所有行。 

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";
}
相关问题
最新问题