Move To Next Table in Javascript

Question

My html is:

<div class="board">
  <table id="mastermind_table_one">
     <td></td> # background color is green
     <td></td> # background color is blue
     <td></td> # background color is yellow
     <td></td> # background color is purple
 </table>

# I click the 'next_round' button and the function moves on to the next table

 <table id="mastermind_table_two">
     <td></td> # background color is yellow
     <td></td> # background color is orange
     <td></td> # background color is blue
     <td></td> # background color is green
 </table>

 # I click the 'next_round' button and the function moves on to the next table

 <table id="mastermind_table_three">
     <td></td> # background color is purple
     <td></td> # background color is blue
     <td></td> # background color is orange
     <td></td> # background color is yellow
 </table>

and so on...

I have a function I created that randomly fills the background color of a table. The problem lies in getting the next table filled when I click the same "next_round" button. Right now, I have 3 separate click events (on the same button) for each of the tables and it's repetitive and wasteful.

Can this be done?

jsfiddle: http://jsfiddle.net/D3zyt/8/ (you'll see that it only fills the second row. I was hoping to have it move on to the next row...)

Answer 1

If I understood correctly, you can do this:

$(document).ready(function(){
    var current_table=0;
    var tables=$("table");

    //your code
    $('.next_round').click(function() {
        $(tables[current_table]).each(function() {
          $(this).find('td').each(function() {
            $(this).css("background-color", setRandomColor);
          })
        })
        if(current_table < tables.length){
            current_table++;
        }    
   })
});