2013-07-16 261 views
-2

我有這樣的jQuery代碼來檢測是否在列中的所有值都是空的,而且,如果是這樣,刪除列:遍歷元素的ID

var valid=0; 
jQuery("#column1 input[type=text]").each(function(){ 
    if(jQuery(this).val() != "") valid+=1; 
}); 

if(valid ==0){ 
    jQuery("td#column1").hide(); 
} 

var valid1=0; 
jQuery("#column2 input[type=text]").each(function(){ 
    if(jQuery(this).val() != "") valid1+=1; 
}); 

if(valid1 ==0){ 
    jQuery("td#column2").hide(); 
} 

是否有到把這個任何方式一個循環,它會遍歷每一列(#column1, #column2, etc..)並刪除該列,如果需要的話,我不必爲每列重複上述代碼?

在此先感謝您的幫助。

編輯

感謝所有的建議。 有些答案的問題是循環會刪除單個單元格。如果要刪除包括標題在內的整個列,我需要循環來確定標題下的所有字段是否爲空。

<table> 
<tr id="prod_specs_header"> 
<td><span class="tooltips-link" title="">Product Code</span></td> 
<td id="column1"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_wheel_diam.gif" data-src="templates/autcastorsandwheels/images/icon_wheel_diam.gif" border="0"></span></td> 
<td id="column2"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_wheel_width.gif" data-src="templates/autcastorsandwheels/images/icon_wheel_width.gif" border="0"></span></td> 
<td id="column3"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_overall_height.gif" data-src="templates/autcastorsandwheels/images/icon_overall_height.gif" border="0"></span></td> 
<td id="column4"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_plate_dimen.gif" data-src="templates/autcastorsandwheels/images/icon_plate_dimen.gif" border="0"></span></td> 
<td id="column5"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_hole_spacing.gif" data-src="templates/autcastorsandwheels/images/icon_hole_spacing.gif" border="0"></span></td> 
<td id="column6"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_hole_width.gif" data-src="templates/autcastorsandwheels/images/icon_hole_width.gif" border="0"></span></td> 
<td id="column7"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_offset.gif" data-src="templates/autcastorsandwheels/images/icon_offset.gif" border="0"></span></td> 
<td id="column8"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_carrycap.gif" data-src="templates/autcastorsandwheels/images/icon_carrycap.gif" border="0"></span></td> 
<td id="column9"><span class="tooltips-link isimg" title=""><img style="opacity: 1; visibility: visible;" src="templates/autcastorsandwheels/images/icon_unit_weight.gif" data-src="templates/autcastorsandwheels/images/icon_unit_weight.gif" border="0"></span></td> 
</tr> 

<tr> 
<td>37TAS5700</td> 
<td class="field" id="column1"><input value="50" type="text"></td> 
<td class="field" id="column2"><input value="" type="text"></td> 
<td class="field" id="column3"><input value="71" type="text"></td> 
<td class="field" id="column4"><input value="" type="text"></td> 
<td class="field" id="column5"><input value="46/38x46/38" type="text"></td> 
<td class="field" id="column6"><input value="" type="text"></td> 
<td class="field" id="column7"><input value="" type="text"></td> 
<td class="field" id="column8"><input value="40" type="text"></td> 
<td class="field" id="column9"><input value="0.14" type="text"></td> 
</tr> 

<tr> 
<td>37TAS5701</td> 
<td class="field" id="column1"><input value="75" type="text"></td> 
<td class="field" id="column2"><input value="" type="text"></td> 
<td class="field" id="column3"><input value="100" type="text"></td> 
<td class="field" id="column4"><input value="" type="text"></td> 
<td class="field" id="column5"><input value="46/38x46/38" type="text"></td> 
<td class="field" id="column6"><input value="" type="text"></td> 
<td class="field" id="column7"><input value="" type="text"></td> 
<td class="field" id="column8"><input value="50" type="text"></td> 
<td class="field" id="column9"><input value="0.34" type="text"></td> 
</tr> 

<tr><td>37TAS5702</td> 
<td class="field" id="column1"><input value="100" type="text"></td> 
<td class="field" id="column2"><input value="" type="text"></td> 
<td class="field" id="column3"><input value="122" type="text"></td> 
<td class="field" id="column4"><input value="" type="text"></td> 
<td class="field" id="column5"><input value="46/38x46/38" type="text"></td> 
<td class="field" id="column6"><input value="" type="text"></td> 
<td class="field" id="column7"><input value="" type="text"></td> 
<td class="field" id="column8"><input value="65" type="text"></td> 
<td class="field" id="column9"><input value="0.55" type="text"></td> 
</tr> 
</table> 
+2

什麼是HTML是什麼樣子? – j08691

+2

由於ID在上下文頁面上必須是唯一的,您的代碼對我來說似乎很陌生,您能發佈相關的HTML代碼嗎? –

+0

你應該給每一列一個類,而不是一個ID,然後按照@ virus721的建議。 – Sablefoste

回答

0

可以先環列,然後內部元素

jQuery("[id^=column]").each(function(){ 
    valid = 0; 
    jQuery(this).find("input[type=text]").each(function(){ 
     if(jQuery(this).val() != "") valid+=1; 
    }); 

    if(valid ==0){ 
    jQuery(this).hide(); 
    } 
}); 
+0

拒絕投票的理由? – Adil

0
var valid = new array(); 
$('[id^="column"]').each(function() { 
    if ($(this).find('input:text').val().length !== 0) { 
     valid[$(this).index()] = 1; 
    } else { 
     valid[$(this).index()] = 0; 
     $(this).hide(); 
    } 
}); 

你需要創建的valid數組,然後您可以逐步列,設置的有效指標每一次都隱藏了空容器。

0

給所有的TD類column,則:

$("td.column").each(function() { 
    var valid = false; 
    $(this).find("input[type=text]").each(function() { 
     if(jQuery(this).val() != "") { 
      valid = true; 
      return false; // end the .each immediately 
     } 
    }); 
    if (!valid) { 
     $(this).hide(); 
    } 
}); 
+0

感謝您的幫助 - 我嘗試了這個建議,幾乎與它無關,它不檢測列中的所有字段是否爲空,然後刪除包含其標題的完整列 - 它似乎刪除所有沒有內容的td?所有的標題消失了?如果列中的一個字段有一個值,那麼我希望整列保留。 –

+0

我在發佈HTML之前寫過它。 HTML與我想象的基於你的代碼不匹配。由於ID必須是唯一的,因此我認爲每個'#columnN'都將是一個單獨的'TD',其中包含一堆'INPUT'。 – Barmar

0

由於它是簡答題天:

$('[id^="column"]:not(:has(input:text:not([value=""])))').hide();