Question

我使用Javascript和php响应动态生成表。我已经为html表的不同标题分配了不同的类。现在我想使用其标题类隐藏特定列，而不将任何类添加到行中。

我如何生成我的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

下面两行应该是必要的（考虑到你的班级名称是headerclassname）

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

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

<强> Example Fiddle

Answer 2

您应该实现一个使用索引来隐藏列的逻辑。像这样;

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

使用标题类名隐藏html表列

2 个答案: