Question

我有一个＆＃39;通用目的＆＃39;表格由9列组成。该表由客户填写。前3列和最后一列是必填字段。其余5列是可选的。客户可以在这些必填列之间填充1个或全部5个可选列。客户端决定5个可选列的标题/标题。这些标头是从客户端到达此表之前填充的客户端表单中提取的。为简单起见，我只显示3行和这些列。在实践中，列最多可以为35，行最多可以为500.此外，完成按钮是早期表单的一部分（此处未描述）。单击时，将显示一个表，其中包含客户端选择的列。该表中的数据提供了其他表格和表格。涉及不同阶段的计算。最后，客户可以查看＆amp;打印这些表以及与此表关联的所有其他报告（此处未描述）。到目前为止，我的数据传输，计算等都可以。除了视图和＆amp;打印此表。虽然我的脚本隐藏了BLANK列（单击完成时），但空白列的SPACE仍然显示。如果客户端仅使用5个Optional列中的1列，则为WORST。我不希望使用复选框或特殊按钮隐藏未使用的可选列，如我遇到的某些解决方案中所建议的那样。我想到的一个解决方案是将桌子向左旋转90度，以便所有的桌子都是垂直的并且在左边。此方法将隐藏空行而不离开SPACE。如果可能的话，我不想使用这种方法。请看看我尝试过的2个脚本，但没有删除空格。建议如何在隐藏列时删除留下的空间。注意，在此步骤之后使用行，单元格索引进行一些计算。在css下面：

    <style type="text/css">
    body {font-family: Arial, Verdana, Helvetica,Sans-serif;}
    th,td {font-size: 12px; border: 1px; border-style: solid; margin: 0px; border-spacing: 0px;}
    .btn {font-size: 14px; font-weight: bold; text-align: center; max-width: 75px;}
    .btn:hover {background-color: rgb(0,250,0);}        
    .hidetf {visibility: hidden; width: 0px; height: 0px; padding: 0px; border: 0px; margin: 0px;}
    </style>

接下来是html：

            <table id='sdtbl'>
    <caption id='sdtblhdr'></caption>
    <thead> 
    <tr>
    <th>s/n</th>
    <th>id</th>
    <th>Names</th>      
    <th>SCRD2tpf</th>
    <th>YHUJ56ty</th>
    <th></th>
    <th></th>
    <th></th>
    <th>Remarks</th>        
    </tr>
    </thead>
    <tbody>     
    <tr>
    <td>1</td>
    <td>PKC1</td>
    <td>LCT1</td>
    <td><input type="text"></td>        
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
    </tr>       
    <tr>
    <td>2</td>
    <td>PKC2</td>
    <td>LCT2</td>
    <td><input type="text"></td>        
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
    </tr>       
    <tr>
    <td>3</td>
    <td>PKC3</td>
    <td>LCT3</td>
    <td><input type="text"></td>        
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
    </tr>       
    <tfoot> 
    <tr>
    <td class='hidetf'></td>
    <td class='hidetf'></td>
    <td>Summary</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>           
    </tr>
    </tfoot>
    </table>
    <br>        
    <input class='btn' onclick="finish()" value="Finish"></p>

以下是我单独尝试过的脚本：

    <script>
    function finish(){
        var sdtbl = document.getElementById('sdtbl');
        var x = sdtbl.rows[0].cells.length;
        var y = sdtbl.rows.length;  
        //Hide unused Bonus & Deduction payroll headers
        for (var i = 0; i < x; i++) {
            var hdr = sdtbl.rows[0].getElementsByTagName('th')[i];
            var val = hdr.innerHTML;        
            if (val === "") {
                $('#sdtbl tr').eq(0).find('td').eq(i);
                for (var j = 1; j < y; j++) {                       
                    $('#sdtbl tr').eq(j).find('td').eq(i);              
                }           
            }       
        }
    }
    </script>



    <script>
    function finish(){
        var sdtbl = document.getElementById('sdtbl');
        var x = sdtbl.rows[0].cells.length;
        var y = sdtbl.rows.length;  
        //Hide unused Bonus & Deduction payroll headers
        for (var i = 0; i < x; i++) {
            var hdr = sdtbl.rows[0].getElementsByTagName('th')[i];
            var val = hdr.innerHTML;        
            if (val === "") {
                hdr.setAttribute('class', 'hidetf');
                for (var j = 1; j < y; j++) {                       
                    sdtbl.rows[j].getElementsByTagName('td')[i].setAttribute('class', 'hidetf');                
                }           
            }       
        }
    }
    </script>

Answer 1

我刚刚在脚本中发现了错误。纠正错误后，第一个脚本正常工作。我应该像在html中那样使用th作为标题行而不是td。我还添加了缺少的.hide（）第二个脚本虽然隐藏了列，但仍会显示它隐藏的任何列的空间。请注意，之前已经发布了正确的脚本，但是有切换按钮，复选框等，这并不能满足我的需求。没有复选框或切换按钮，此脚本工作正常。

<script>
function finish(){
    var sdtbl = document.getElementById('sdtbl');
    var x = sdtbl.rows[0].cells.length;
    var y = sdtbl.rows.length;  
    //Hide unused Bonus & Deduction payroll headers
    for (var i = 0; i < x; i++) {
        var hdr = sdtbl.rows[0].getElementsByTagName('th')[i];
        var val = hdr.innerHTML;        
        if (val === "") {
            $('#sdtbl tr').eq(0).find('th').eq(i).hide();
            for (var j = 1; j < y; j++) {                       
                $('#sdtbl tr').eq(j).find('td').eq(i).hide();              
            }           
        }       
    }
}
</script>

隐藏表格列

1 个答案: