ヘッダークラ​​ス名を使用してhtmlテーブルの列を非表示にする

Question

JavaScriptとPHPの応答を使用して動的にテーブルを生成しています。私はHTMLテーブルの別のヘッダに異なるクラスを割り当てました。今私は、行にクラスを追加せずに、そのヘッダークラ​​スを使用してspecifc列を非表示にしたい。

私はHTMLのテーブルを作成していますどのようには以下の通りである：ニードフルを行う必要があります二行以下

for(var i = 0; i < tableHeaderData.length; i++){ 
    html += "<td class='th task_'" + tableHeaderData[i] + ">" + tableHeaderData[i] +"</td>"; 
} 

var totalDays = 0; 

for(var i = 0; i < projectAndTask.length; i++){ 
    totalDays += projectAndTask[i].days/2 
    html += "<tr>"+ 
     "<td>" + (i+1) +"</td>"+//serial no. 
     "<td>" + projectAndTask[i].empName + "</td>" + 
     "<td>" + (projectAndTask[i].days/2) + "</td>" + 
     "<td>" + projectAndTask[i].category + "</td>"; 

    var loopLastIndex = 4; // this variable will save the last position of k -loop in order to run it from the same last position 

     for(var j = 0; j < projectAndTask[i].taskArray.length; j++){ 
     for(var k = loopLastIndex; k < tableHeaderData.length; k++) { 
      if (tableHeaderData[k].split('_')[0] == projectAndTask[i].taskArray[j].taskId) { 
       html += "<td>" + projectAndTask[i].taskArray[j].taskCount/2 + "</td>"; 
       //for testing un comment it 
       //html += "<td>" + projectAndTask[i].taskArray[j].taskName + '_' + projectAndTask[i].taskArray[j].taskId + "</td>"; 

       var l; 

       for(l = 0; l < specificTaskTotalDaysSpent.length; l++) { 
        if (projectAndTask[i].taskArray[j].taskId == specificTaskTotalDaysSpent[l].taskId) { 
         specificTaskTotalDaysSpent[l].days = specificTaskTotalDaysSpent[l].days + (projectAndTask[i].taskArray[j].taskCount/2); 
         break; 
        } 
       } 

       if(specificTaskTotalDaysSpent.length == 0 || (l == specificTaskTotalDaysSpent.length)){//|| 
       TotalTimeSpentOnTaskAdd(projectAndTask[i].taskArray[j].taskId, tableHeaderData[k].split('_')[1], projectAndTask[i].taskArray[j].taskCount/2); 
       } 

       loopLastIndex = ++k; //save the last position of array i.e., again start for next index 
       break; 
      } 
      else { 
       html += "<td> </td>"; 
      } 
     } 
    } 
    html += "</tr>"; 
} 

html +="</tr>"; 
html +="</table>"; 
$jq("#ProjectsPreviousDaysInfo").html(" "); 
$jq("#ProjectsPreviousDaysInfo").html(html); 

Answer 1

が

$('td.headerclassname').hide(); // hide the column header th 

$('tr').each(function(){ 
    $(this).find('td:eq('+$('td.headerclassname').index()+')').hide(); 
}); 

Example Fiddle

Answer 2

（自分のクラス名を考慮し headerclassnameです）

インデックスを使用して列を非表示にするロジックを実装する必要があります。 このように。

<table id="table"> 
    <thead> 
     <tr> 
       <td class="c1">Test</td> 
       <td class="c2">Test2</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
       <td>Val</td> 
       <td>Val1</td> 
     </tr> 
     <tr> 
       <td>Val</td> 
       <td>Val1</td> 
     </tr> 
    </tbody> 

<script type="text/javascript"> 

     $(document).ready(function(){ 
     hideColumn("c1"); 
     }) 

function hideColumn(className){ 

     var columnIndex = $("#table thead tr td."+className).index(); 

     $("#table thead tr td:eq("+columnIndex+")").hide(); 

     $("#table tbody tr").each(function(){ 
      $(this).find("td:eq("+columnIndex+")").hide(); 
     }); 
} 

</script>