user3451400 user3451400 - 3 years ago 71
CSS Question

Odd Behavior When Modifying Values In Table Using jQuery/For-Loop For Child Selection

I am in the process of generating a numbered table on a website. This will eventually be a calendar I have developed from scratch. It starts as a table of height 6 and width 7. I am currently having attempting to have the code label the cells of this table 1-42, top-to-bottom, and left-to-right. The code for the table is as follows:

<table id="calendar">
<thead>
<tr class="cal_row">
<th class="cal_col">Sun</td>
<th class="cal_col">Mon</td>
<th class="cal_col">Tue</td>
<th class="cal_col">Wed</td>
<th class="cal_col">Thr</td>
<th class="cal_col">Fri</td>
<th class="cal_col">Sat</td>
</tr>
</thead>
<tbody>
<tr class="cal_row">
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
</tr>
<tr class="cal_row">
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
</tr>
<tr class="cal_row">
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
</tr>
<tr class="cal_row">
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
</tr>
<tr class="cal_row">
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
</tr>
<tr class="cal_row">
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
<td class="cal_col">00</td>
</tr>
</tbody>
</table>


-and the jQuery to do this is as follows:

function cal_bt(){
var $bt = $('#month_tag');
$bt.click(function(){
var child_index;
var child_row;
for( var i = 0 ; i < 42 ; i++ ){
child_index = ( i % 7 ) + 1;
child_row = ( Math.floor( i / 6 ) ) + 1;
$('#calendar > tbody > tr:nth-child(' + child_row + ') > .cal_col:nth-child(' + child_index +')').html(i + 1);
}
});
}


Right now, it is doing something a bit odd. The table comes out looking like this:

http://imgur.com/ivwA5CW

I'm not quite sure what is going on.

Am I missing something?

Answer Source

You need to use Math.floor(i / 7), not Math.floor(i / 6)

jsFiddle example here


A more compact alternative could be to use:

$("#example").click(function(){
  $("tbody .cal_col").each(function(i){
     $(this).text(i + 1);
  });
});

Where #example is the ID of the button you wish to trigger the event with.

jsFiddle example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download