javascript - 当 td 行为空时隐藏表格列

Question

表:

<table cellspacing = "0" cellpadding = "0" border = "1" width = "90%" class="table1">
    <tr >                    
        <th><b>Pos</b></th>
        <th><b>NICOMATIC P/N</b></th>
        <th><b>Client P/N</b></th>
        <th><b>ADD</b></th>
        <th><b>Quantity Ordered &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Requested Date &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Discount  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Unit Price</b></th>
        <!--<td><b>Discount</b></td>
        <td><b> &nbsp;</b></td>                          
        <td>Add</td> -->  
    </tr>
    <apex:repeat value="{!qouteLineItemMap}" var="qliRow" id="theQliRepeat">
    <apex:repeat value="{!qouteLineItemMap[qliRow]}" var="qli" id="therepeat1">
    <tr>
        <td><apex:outputText value="{!FLOOR(rowNum)}" style="align:center;"/></td>
        <td class = "tdCustom" > <apex:outputfield value="{!qli.Name}"/><apex:inputfield value="{!qli.Or_Nicomatic_p_n__c}"/></td>
        <td class = "tdCustom" ><apex:outputField value="{!qli.Client_P_N__c}" /><apex:inputfield value="{!qli.Or_clientpn__c}"/></td>
        <td class = "tdCustom" >
        <apex:commandButton value="Add" action="{!addBatch}" reRender="pb,errormsg" immediate="true">
        <apex:param assignTo="{!qliRowNum}" value="{!rowNum}" name="qliRowNum"/>
        </apex:commandButton>
        </td>
        <td class = "tdCustom" style="width:100px;">             
        <apex:repeat value="{!batchMap[qliRow]}" var="child" id="therepeat2">
        <table class="table-data" border = "1">
        <apex:variable value="{!1}" var="batchrowNum"/>
            <tr id="tr_clone">
                <td><apex:inputfield value="{!child.Quantity_Ordered__c}"  style="width:70px" required="true"/></td>
                <td> <apex:inputfield value="{!child.Requested_Date__c}"  style="width:90px" required="true"/></td> 
                <td> <apex:inputfield value="{!child.Discount__c}" style="width:40px" required="true"/></td>                       
                <td><apex:inputfield value="{!child.Unit_Price__c}"  style="width:110px" required="true"/></td>
                <td>
                <apex:commandButton value="Delete" action="{!deleteBatch}" reRender="pb,errormsg" id="deleteBatchid" immediate="true">
                <apex:param assignTo="{!qliRowNum}" name="deleteQlihRow" value="{!rowNum}"/>
                <apex:param assignTo="{!deleteBatchRow}" name="deleteBatchRow" value="{!batchrowNum}"/>
                </apex:commandButton>
                </td>
            </tr>
            <apex:variable var="batchrowNum" value="{!batchrowNum+ 1}"/>
        </table>
        </apex:repeat>
        </td> 
    </tr>
    <apex:variable var="rowNum" value="{!rowNum + 1}"/> 
    </apex:repeat>  
    </apex:repeat>
</table>                                 

Javascript:

<script>
 $('.table1 tr th').each(function(i) {
        //select all tds in this column
        var tds = $(this).parents('table')
            .find('tr td:nth-child(' + (i + 1) + ')');
        if(tds.is(':empty')) {
            //hide header
            $(this).hide();
            //hide cells
            tds.hide();
        } 
    }); 

</script>          

最初

<th><b>Quantity Ordered &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Requested Date &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Discount  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Unit Price</b></th>

此列为空。当 td 整列为空时，我想隐藏此列。我想在任何一个 td 不为空时显示该列。我已尝试使用上述代码，但它不起作用。

提前谢谢您。

Answer 1

我认为你可以通过以下方式实现你的目标:

var tableRows = $('#table1 tr');
tableRows.eq(0).find('td:empty').each(function() {
    var index = $(this).index();
    console.log(index);
    var rowIndex = $(this).parent().index();
    var isEmpty = true;
    tableRows.not($(this).parent()).find('td').eq(index).each( function() {
        console.log($(this));
        if(!$(this).is(':empty')) { isEmpty = false; }
    });
    if(isEmpty) { tableRows.each(function() { $(this).find('td').eq(index).hide() }); }
});

工作示例: JSFiddle