loop problems jQuery selection

Hi,

for(var contador = 1;contador <= response[1];++contador) {
                                var h = 'h'+contador;
                                var cc = 'col'+contador;
                                var r = contador - 1;
                                $("#"+h).click(function () {

                                    if ($(this).hasClass('seleccionado')) {
                                        $(this).removeClass('seleccionado');
                                        $("."+cc).show('fast');
                                        $("input[data-column=r]").parent().show('fast');

                                    } else {
                                        $(this).addClass('seleccionado');
                                        $("."+cc).hide('fast');
                                        $("input[data-column=r]").parent().hide('fast');
                                    }
                                });

                            }

Open in new window


In this code i need to make a loop for apply this to some selections in my code, but doesn't work when i try with this loop, if i write the code one by one without using the loop, works perfect, any idea? What is wrong in this code?
LVL 1
joyacv2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Before trying to figure out what is wrong with the loop can I ask why you are binding individual click events to different ID's, why not give your target elements a class and bind the .click() to that class. Any item specific data you need in the event handler you can add to the target element with custom data attributes

Example
<div id="col1" class="col-click" data-id="1">...</div>
<div id="col2" class="col-click" data-id="2">...</div>
...
$('.col-click').click(function() {
   var id = $(this).data('id');
   ...
});

Open in new window

0
joyacv2Author Commented:
Hi,

In my code i receive an array with a list of headers and a table with headers. Each header is used in a dropdown that have the headers name. When i click a header the column hide and unhide. That is the reason for that i am using id's.
0
joyacv2Author Commented:
This is the code that returns the table in a ajax from php

 public function searchableTableUsingTableSorter(&$conexion,$columnsArray,$query){

        $retorno = '<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Seleccione columnas
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">';

    for ($counter = 0;$counter < count($columnsArray);++$counter) {
            $retorno .= "<li ><a ><input type = 'checkbox' id = 'h".($counter+1)."' checked > $columnsArray[$counter]</a ></li >";
        }
            $retorno .= '</ul></div><div id="infoTable" class="table-responsive"><table id="myTable" class="table table-striped table-bordered table-hover tablesorter bootstrap-popup"><thead>';

        for ($counter = 0;$counter < count($columnsArray);++$counter) {
            $retorno .= "<th data - priority = '1' class='col".($counter+1)."'>".$columnsArray[$counter]."</th>";
        }
             $retorno .= '</thead><tbody class="searchable">';

        $query = oci_parse($conexion, $query);

        oci_execute($query);

        while (($row = oci_fetch_array($query, OCI_BOTH)) != false) {
            //Use the uppercase column names for the associative array indices
            $retorno .=  "<tr>";
            for($counter = 0;$counter < count($columnsArray);++$counter) {
                $retorno .= "<td class='col".($counter + 1)."'><b>" . $row[$counter] . "</b></td>";
            }
             $retorno .= "</tr>";
        }

        $retorno .= '</tbody></table></div></div>';

        return array($retorno,count($columnsArray));

    }

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
Take a look at this sample and let me know if this is what you were looking for?
HTML
    <table class="table">
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1 Col 1</td>
          <td>Row 1 Col 2</td>
          <td>Row 1 Col 3</td>
          <td>Row 1 Col 4</td>
        </tr>
        <tr>
          <td>Row 2 Col 1</td>
          <td>Row 2 Col 2</td>
          <td>Row 2 Col 3</td>
          <td>Row 2 Col 4</td>
        </tr>
        <tr>
          <td>Row 3 Col 1</td>
          <td>Row 3 Col 2</td>
          <td>Row 3 Col 3</td>
          <td>Row 3 Col 4</td>
        </tr>
        <tr>
          <td>Row 4 Col 1</td>
          <td>Row 4 Col 2</td>
          <td>Row 4 Col 3</td>
          <td>Row 4 Col 4</td>
        </tr>
      </tbody>
    </table>

Open in new window

JQuery
<script>
$(function() {
  $('table th').click(function() {
    var el = $('tbody td:nth-child(' + ($(this).index() + 1) + ')')
    var visibility = (el.css('visibility') == 'hidden') ? 'visible' : 'hidden';
    
    el.css({visibility: visibility});
  });
});
</script>

Open in new window

0
Julian HansenCommented:
Also, just checking that something like jQuery Datatables would not be a solution for you

https://www.datatables.net/
0
joyacv2Author Commented:
Hi Julian,

The same link don't open, thanks!
0
Julian HansenCommented:
I just tested it again - seems fine - link is http://www.marcorpsa.com/ee/t1078.html

Having re-read your code I have put another sample together see http://www.marcorpsa.com/ee/t1078a.html

There are many different ways to do this but this is probably the simplest
HTML
      <ul class="dropdown-menu">
        <li><a><input type="checkbox" checked>1</a></li>
        <li><a><input type="checkbox" checked>2</a></li>
        <li><a><input type="checkbox" checked>3</a></li>
        <li><a><input type="checkbox" checked>4</a></li>
      </ul>

Open in new window

jQuery
<script>
$(function() {
  $('li a input[type=checkbox]').click(function() {
    var index = $(this).parent().parent().index() + 1;
    $('table td:nth-child(' + index + '), table th:nth-child(' + index + ')').toggle();
  });
});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
joyacv2Author Commented:
Wow, works perfect!!!!!!! Thank You very much!!!!!!!!
0
Julian HansenCommented:
You are most welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.