usn-fizz

by brico

HTML

<div role="main">
    <table caption="Fizz Buzz" summary="A table of values, with Fizzes and Buzzes marked" class="fizzer">
      <caption>Fizz Buzz</caption>
      <thead>
        <tr>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
      </tbody>
    </table>
  </div>

JavaScript

(function($) {

    $.fn.fizzbuzzify = function(options) {

        var settings = $.extend({
            statuses: {
                'Fizz': 3,
                'Buzz': 5
            }
        }, options);

        return this.each(function() {
            if (this.tagName.toLowerCase() == 'table') {
                $(this).find('th').filter(':last').after('<th>Status</th>'); //this must change
                $(this).find('tr td:first-child').each(function() {
                    var returnstring, value = $(this).text();
                    if (value % 15 === 0) {
                        returnstring = 'FizzBuzz';
                    } else if (value % 5 === 0) {
                        returnstring = 'Buzz';
                    } else if (value % 3 === 0) {
                        returnstring = 'Fizz';
                    } else {
                        returnstring = 'Uncool';
                    }
                    $(this).after('<td>' + returnstring + '</td>');
                });
            } else {
                throw new Error('fizzbuzzify(): only tables may be fizzbuzzified');
            }
        });
    };

})(jQuery);

$(document).ready(function() {
    $('.fizzer').fizzbuzzify();
});