Mohammad Faizan Khan Mohammad Faizan Khan - 6 months ago 31
HTML Question

Hide html table column using header class name

enter image description here
I am dynamically generating table using Javascript and php response. I have assigned different class to different header of html table. Now I want to hide specifc column using its header class without adding any class into rows.

How I am generating my html table is given below:

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

Below two lines should do the needful (considering your class name is headerclassname)

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

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

Example Fiddle

Comments