Set of radio buttons I wrote a quick function to create a set of radio buttons, three per table row. I would like some feedback about how I can shorten this bit of code using algebraic functions, or different jQuery functionality.

var arr = [ "earth", "mars", "jupiter", "saturn", "venus", "argus", "pluto", "janus", "canary", "orange", "butter pineapple", "eventual bliss"];

var obj = { one:"earth", two:"mars", three:"jupiter", four:"saturn", five:"venus" };

var start = ""; end = "";
var count = 0;
$("#radio_container").append("&lt;table&gt;"); 
    $.each(arr, function(i, val) {

        if(count == 3)
        {
            start = "&lt;tr&gt;";
            end = "&lt;/tr&gt;"
            count= 0;
        }

        $("#radio_container").append(start);    
        $("#radio_container").append("&lt;td&gt;&lt;input name='finalcategory' type='radio' value='"+val+"'&gt;&lt;/input&gt;&lt;/td&gt;&lt;td class='style3'&gt;"+val+"&lt;/td&gt;");
        $("#radio_container").append(end);  
        count++;
        start = "";
        end = "";

    });
$("#radio_container").append("&lt;/table&gt;");
Here are some points to consider:


Your end variable is declared without a var, so that it's leaking into the global namespace. Don't do that.
As it stands now, your obj isn't used anywhere in the code. I'll assume it's not applicable here.
Instead of manually keeping count of your iteration, use the % (Modulus) operator to calculate your rows.
jQuery's append method doesn't deal with code fragments the way you seem to think it does. append("&lt;table&gt;") actually appends a whole table, not just an opening tag (that's not even possible).
Access to the DOM is not free. Every time you hit the DOM you incur some overhead. Try keeping DOM modification to a minimum.
Unlike others, when dealing with a simple HTML construct such as this, I prefer to build my fragment from a concatenated string since it's much faster.




With all that in mind, here's how I would do it:

var arr = ["earth", "mars", "jupiter", "saturn", "venus", "argus", "pluto", "janus", "canary", "orange", "butter pineapple", "eventual bliss"],
    snippet = '&lt;table&gt;&lt;tr&gt;';

$.each(arr, function(i, val) {

    if (i % 3 == 0) snippet += '&lt;/tr&gt;&lt;tr&gt;';

    snippet += '&lt;td&gt;&lt;input name="finalcategory" type="radio" value="' + val + '" /&gt;&lt;/td&gt;' +
               '&lt;td class="style3"&gt;' + val + '&lt;/td&gt;';
});

snippet += '&lt;/tr&gt;&lt;/table&gt;';

$("#radio_container").append( snippet );


See it here in action: http://jsfiddle.net/DWcSN/



The code above works, but the text is not associated with the radio button in any way.

To remedy that, consider wrapping labels around your radio buttons:

snippet += '&lt;td&gt;&lt;label class="style3"&gt;' +
               '&lt;input name="finalcategory" type="radio" value="' + val + '" /&gt;' +
               val +
           '&lt;/label&gt;&lt;/td&gt;';


See it here in action: http://jsfiddle.net/DWcSN/1/ (clicking the text activates the corresponding button).



P.S. style3 is not very descriptive. You should consider coming up with a more intuitive naming convention.