-2

我有这个 jQuery 代码来检测列中的所有值是否为空，如果是，则删除该列：

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

4 回答 4

0

为所有 TD 赋予 class 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();
    }
});
于 2013-07-16T13:51:44.047 回答
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();
  }
});
于 2013-07-16T13:47:04.677 回答
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然后您可以逐步浏览这些列，为每个列设置一个有效的指示器，同时隐藏空。

于 2013-07-16T13:48:42.180 回答
0

由于是简答日：

$('[id^="column"]:not(:has(input:text:not([value=""])))').hide();
于 2013-07-16T14:06:25.620 回答