[英]Hide table column when td rows are empty
表:
<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 Requested Date Discount Unit Price</b></th>
<!--<td><b>Discount</b></td>
<td><b> </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>
intially
<th><b>Quantity Ordered Requested Date Discount Unit Price</b></th>
此列为空。当整个列的td为空时,我想隐藏此列。 当任何一个td不为空时,我想显示该列。我曾尝试使用上述代码,但无法正常工作。
先感谢您。
我认为您可以通过以下方式实现目标:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.