How do I add a table row with this jquery script?

I have a scri开发者_运维百科pt that converts a select list into a table of checkboxes;

$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody><tr></tr></tbody></table>');

$('#edit-taxonomy-1 option').each(function() {
    var label = $(this).html();
    var value = $(this).attr('value');
    var ind = $(this).index();
    if (ind % 3 === 0  ) {
        $('#checkboxes tbody').append('</tr><tr><td><input type="checkbox" value="&#039;+value+&#039;">' + label + '</td>');
    }
    else {
        $('#checkboxes tbody').append('<td><input type="checkbox" value="&#039;+value+&#039;">' + label + '</td>');
    }
});

$('#edit-taxonomy-1').replaceWith($("#checkboxes"));

However I cannot get every third element to show up in a new row nicely.

Here is a fiddle: http://jsfiddle.net/cxVhz/

It shows what I have and what I want

I think append() is doing things behind the scenes that might be "fixing" your html for you before it appends it.

Try this similar approach:

var tr = "";
$('#edit-taxonomy-1 option').each(function() {
    var label = $(this).html();
    var value = $(this).attr('value');
    var ind = $(this).index() + 1;

    // continually build your checkbox and label
    var checkbox = '<input type="checkbox" value="&#039;' + value + '&#039;" />' 
        + label;

    // keep adding to your tr
    tr += "<td>" + checkbox + "</td>";
    if (ind % 3 == 0) {
        // append the tr and clear its value
        $('#checkboxes tbody').append('<tr>' + tr + '</tr>');
        tr = "";
    }
});

// if ind % 3 was never hit above, output what is within tr
if (tr != "")
{
    $('#checkboxes tbody').append('<tr>' + tr + '</tr>');
}

working example: http://jsfiddle.net/cxVhz/18/

super updated solution:

$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody></tbody></table>');

$('#edit-taxonomy-1 option').each(function(index) {
    var $this = $(this);
    if (index % 3 === 0  ) {
        $('#checkboxes tbody').append('<tr></tr>');
    }
    $('#checkboxes tbody tr:last').append('<td><input type="checkbox" value="&#039;' + $this.val() + '&#039;" />' + $this.html()+ '</td>');
});

$('#edit-taxonomy-1').replaceWith($("#checkboxes"));

working example: http://jsfiddle.net/cxVhz/40/

Here is the quick and just working update without refactoring the code. http://jsfiddle.net/cxVhz/22/ Edit: The tr inside the table declaration is not needed. Replace it with

$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody></tbody></table>');

updated link: http://jsfiddle.net/cxVhz/34/

The previous examples had extra TR's, so I thought you might want to see this solution. Good luck: http://jsfiddle.net/cxVhz/23/

It looks as though you are appending a TD straight to the table body and not to a table row:

 $('#checkboxes tbody').append('<td><input type="checkbox" value="&#039;+value+&#039;">' + label + '</td>');

EDIT:

    var row = $('<tr></tr>');
    $('#edit-taxonomy-1 option').each(function() {
        var label = $(this).html();
        var value = $(this).attr('value');
        var ind = $(this).index();
        if (ind % 3 === 0  ) {
            $('#checkboxes tbody').append(row);
            row = $('<tr></tr>');
            var td = $('<td><input type="checkbox" value="&#039;+value+&#039;">' + label + '</td>');
            row.append(td);
        }
        else {
            $('<td><input type="checkbox" value="&#039;+value+&#039;">' + label + '</td>').appendTo(row);
        }
    });
    if(row.html().length>0){
        $('#checkboxes tbody').append(row);
    }

This JS works.

$('#edit-taxonomy-1 option').each(function() {
    var label = $(this).html();
    var value = $(this).attr('value');
    var ind = $(this).index();
    if (ind % 3 === 0) {
        $('#checkboxes tbody').append('<tr></tr>');
    }
    $('#checkboxes tbody tr:last-child').append('<td><input type="checkbox" value="&#039;+value+&#039;">' + label + '</td>');
});