Loop through element id's

Question

I have this jQuery code to detect if all the values in a column are empty, and, if they are, remove the column:

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();
}

Is there any way of turning this in to a loop so, that it goes through each column (#column1, #column2, etc..) and removes that column if needed, s I don't have to duplicate the above code for each column?

Thanks in advance for any help.

EDIT

Thanks for all the suggestions. The issue with some of the answers is that the loop would remove individual cells. I need the loop to work out if all of the fields under the header are empty if they are remove the whole column including the header.

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

As IDs must be unique on context page, your code seems strange to me, can you post relevant HTML code? — A. Wolff, Jul 16 '13 at 13:46
You should give each column a class, not an id, and then follow @virus721's suggestion. — Sablefoste, Jul 16 '13 at 13:47
So OP, will you consider to provide relevant HTML code or not??? — A. Wolff, Jul 16 '13 at 14:04
sorry for the delay on the html but is this what you required? — Mark Booth, Jul 16 '13 at 15:37

Adil · Answer 1 · 2013-07-16T14:02:00.227

0

You can first loop the column and then inner elements

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();
  }
});

edited Jul 16 '13 at 14:02

answered Jul 16 '13 at 13:47

Adil

146,340
25
209
204

score 0 · Answer 2 · answered Jul 16 '13 at 13:48

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();
    }
});

You'll need to create an array of valid and then you can step through the columns, setting a valid indicator for each while hiding the empties.

score 0 · Answer 3 · answered Jul 16 '13 at 13:51

0

Give all the TDs the class column, then:

$("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();
    }
});

answered Jul 16 '13 at 13:51

Barmar

741,623
53
500
612

Thanks for your help - I tried this suggestion which almost worked apart from it doesnt detect whether all of the fields in the column are empty and then remove the full column including its header - it seems to remove all td's with no content? all the headers disappear? if one of the fields in the column has a value then I want the full column to stay. – Mark Booth Jul 16 '13 at 16:52
I wrote it before you posted your HTML. The HTML doesn't match what I imagined it to be based on your code. Since IDs are required to be unique, I thought each `#columnN` would be a single `TD` with a bunch of `INPUT`s in it. – Barmar Jul 16 '13 at 17:00

Dom Day · Answer 4 · 2013-07-16T14:18:55.770

0

Since it's short answer day:

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

edited Jul 16 '13 at 14:18

answered Jul 16 '13 at 14:06

Dom Day

2,542
13
12

Loop through element id's

4 Answers4