如何使用此 jquery 脚本添加表格行？答案

【问题标题】：How do I add a table row with this jquery script?如何使用此 jquery 脚本添加表格行？
【发布时间】：2018-04-01 07:04:15
【问题描述】：

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

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

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

这是一个小提琴：http://jsfiddle.net/cxVhz/
它显示了我拥有什么以及我想要什么

【问题讨论】：

如果您没有收到评论警告，我会这样做：jsfiddle.net/cxVhz/38

标签： jquery html-table row

【解决方案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/

超级更新的解决方案：

$('#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/

【讨论】：

这是正确答案。我在 jsfiddle 中做同样的事情。这是我的解决方案... +1 做得比我快 :) jsfiddle.net/cxVhz/24
是的，您需要将有效的 HTML 放在那里，否则浏览器可能会做一些奇怪的事情来修复它。您必须将 DOM 视为 DOM 而不是 HTML。（即，您不能只在其中添加开始和结束标签，您必须向父元素添加元素。）这是我使用 jQuery 和其他一些添加的解决方案：jsfiddle.net/cxVhz/27
我也是这么想的，直到我看到了suhairs的答案，这是最正确的答案
@Drackir 也是不错的解决方案，而且更加优雅和直接
谢谢。 :) 实际上有很多方法可以改进 OPs 代码，但我认为这超出了问题的范围。 :P

【解决方案2】：

这是无需重构代码的快速且有效的更新。 http://jsfiddle.net/cxVhz/22/ 编辑：不需要表声明中的 tr 。替换为

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

更新链接：http://jsfiddle.net/cxVhz/34/

【讨论】：

我最喜欢这个答案。很好地使用:last 并且更合乎逻辑。 +1
一定要去掉开头多余的空TR

【解决方案3】：

前面的例子有额外的 TR，所以我想你可能想看看这个解决方案。祝你好运：http://jsfiddle.net/cxVhz/23/

【讨论】：

【解决方案4】：

看起来好像您将 TD 直接附加到表格主体而不是表格行：

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

编辑：

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

【讨论】：

是的，我知道，但如果我这样做 $('#checkboxes tbody tr') 它会重复条目

【解决方案5】：

这个 JS 有效。

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

【讨论】：