jquery - 如何使用此 jquery 脚本添加表行？

Question

我有一个脚本，可以将选择列表转换为复选框表；

$('#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"));

但是，我无法让每三个元素都很好地显示在新行中。

这是一个 fiddle :http://jsfiddle.net/cxVhz/
它显示了我拥有什么和我想要什么

Answer 1

我认为 append() 正在幕后做一些事情，可能会在附加 html 之前为您“修复”它。

尝试类似的方法:

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>');
}

<小时/>

工作示例:http://jsfiddle.net/cxVhz/18/

<小时/>

super 更新的解决方案:

$('#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"));

<小时/>

工作示例:http://jsfiddle.net/cxVhz/40/