Iterating through tables with Javascript

Question

Here is my jfiddle: http://jsfiddle.net/D3zyt/8/

html:

<div class="board">
 <table id="mastermind_table_one">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
 </table>

 <table id="mastermind_table_two">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</table>

 <table id="mastermind_table_three">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
 </table>

You'll notice in the html that I have three tables. Is there a way when I click "next_round", the background colors change for the next table and not the current (hardcoded) table?

I'd store the already coloured table's ID in localSession and then iterate over that data. Once you've coloured all 3 tables you can clear it and repeat the cycle? — Klemen Tusar
– Klemen Tusar, Commented Apr 24, 2014 at 19:43
Use a common class for all tables, store an index variable, and use .eq(#) to select the current table. Better yet, use one table and use .eq(#) to select the desired row. — Blazemonger
– Blazemonger, Commented Apr 24, 2014 at 19:44

MrCode · Accepted Answer · 2014-04-24 19:46:14Z

2

This does it by storing the current table in a variable and using .next() to find the next table:

Fiddle

var current;

$('.next_round').click(function() {

   if(typeof current == 'undefined' || current.next('table').length == 0){
       current = $('.board table').first();   
   } else {
       current = current.next('table'); 
   }

   $(current).find('td').each(function() {
     $(this).css("background-color", setRandomColor);
   });

});

answered Apr 24, 2014 at 19:46

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

veritas Over a year ago

Remove $(current).each(function() {

user3007294 Over a year ago

genius! Thanks Mr.Code. This worked actually like I was hoping for. Thanks a ton!

edrian · Accepted Answer · 2014-04-24 19:44:00Z

1

Something like this helps?

var tables = $('.board table');
var currentTable = 0;

$('.next_round').click(function() {
    var table = tables[currentTable];

    table.find('td').each(function() {
        $(this).css("background-color", setRandomColor);
      });

    currentTable++;
    if(currentTable > tables.length){
       currentTable = 0;
    }
}

answered Apr 24, 2014 at 19:44

edrian

4,5315 gold badges34 silver badges35 bronze badges

1 Comment

veritas Over a year ago

table.each not required

bottens · Accepted Answer · 2014-04-24 20:00:21Z

This is a solution that implements event data in jquery.

And here is a fiddle: http://jsfiddle.net/D3zyt/10/

var randomColor = ["red", "blue", "green", "#9CBA7F", "yellow", "#BF5FFF"];

function setRandomColor() {
    return randomColor[Math.floor(Math.random() * randomColor.length)];
}


$('.next_round').on("click", {i: 0}, function(e) {
    var selectorFragment = ["one","two","three"]

    $('#mastermind_table_'+selectorFragment[e.data.i]).each(function() {
      $(this).find('td').each(function() {
        $(this).css("background-color", setRandomColor);
      })
    })

    e.data.i += 1
    if (e.data.i === 3) e.data.i = 0 
})

However, restructuring your html would probably make for an easier solution later down the road ;)

Labib Ismaiel · Accepted Answer · 2014-04-24 20:19:10Z

1

Note: this post contains a bad practice, I left it maybe someone could learn from it, read the comment

just use one table like:

<table id="mastermind_table_three">
<td></td>
<td></td>
<td></td>
<td></td>
</table>

and then add a button <button onclick="nextRound(this) />

with the function as:

function nextRound(that) {
that.i = that.i ? (that.i + 1) : 1; 
$('table').removeClass("mastermind_table_" + that.i - 1);
$('table').addClass("mastermind_table_" + that.i);
}

edited Apr 24, 2014 at 20:19

answered Apr 24, 2014 at 19:47

Labib Ismaiel

1,3402 gold badges12 silver badges21 bronze badges

3 Comments

veritas Over a year ago

Warning... this is mixing js with html, bad practise example. Besides that it won't work because you have a '-' inside your function name :O

Labib Ismaiel Over a year ago

you're correct about the dash thing, it was a mistake, but mixing html with javascript ?! this is new to me?! isn't DOM manipulation the main reason for using jQuery ?!

veritas Over a year ago

You could manipulate DOM and do every other operation without polluting HTML with javascript names. When your application will evolve it will be hard to maintain such code. I'm talking about <button onclick="nextRound(this)"> of course

Collectives™ on Stack Overflow

Iterating through tables with Javascript

4 Answers 4

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related