Question

我想在HTML表格中添加一系列元素：

var tags_arr = [1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19];

我可以通过简单地每隔4次迭代放置一个<tr>标记来制作HTML表格：

var checks = "<table border=1>";

for (var c = 0; c < tags_arr.length; c++){



    if (c%4 == 0){

         checks += "<tr>";

    }

    checks += "<td>" + tags_arr[c] + "</td>";

}

checks += "</table>";
$("body").append(checks);

JSBIN

但是，此解决方案依赖于浏览器在“看到”新的开始标记时注入结束<\tr>标记。浏览器似乎也不在乎最后一行的<td>个单元格比前一行少。

它有效，但有没有办法扩展这个，以便不完全依赖浏览器。我已经尝试使用正则表达式将它们注入到字符串中，但似乎应该有一种方法可以在循环中执行此操作。这可行吗？或者因为它只需要在现代浏览器中工作，我可以依靠Chrome和Firefox为我进行清理吗？

修改

hacky正则表达方式：

checks = checks.replace(/(<tr>)/g, "</tr><tr>").replace(/<\/tr>/, "");

checks += "</tr></table>";

Answer 1

您可以在附加起始TR标记之前简单地附加TR结束标记：

for (var c = 0; c < tags_arr.length; c++){
    if (c%4 == 0){
         if (c !== 0) checks +="</tr>";
         checks += "<tr>";
    }
    checks += "<td>" + tags_arr[c] + "</td>";
}

checks += "</tr></table>";

PS：处理边缘情况。

编辑：一个更精确的解决方案是先将数据分配到数组：

var distributed = [];
var tags_arr = [1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19];
while(tags_arr.length > 0) {
  distributed.push(tags_arr.splice(0,4));
}

然后使用一些智能循环来创建html：

var html = distributed.reduce(function(html, item){ 
  var td = item.reduce(function(html, item){
    return html + '<td>' + item + '</td>';
  }, '');
  return html + '<tr>' + td + '</tr>';
}, '');

html = '<table border=1>' + html + '</table>';

Answer 2

HTML5规范explicitly告诉我们，在明显的情况下，没有必要关闭<tr>和<td>代码：

无需在下一个<td>或<td>或表格区块（<tr>，<tbody>）或{{1}之前关闭<tfoot>关闭标签。
无需在下一个</table>，阻止版块或关闭表格之前关闭<tr>。

我严重怀疑你会遇到现代浏览器，这些浏览器不会在这里做正确的事情。我打赌即使是IE6也能正确完成。

Answer 3

在打开之前关闭tr标签。如果c == 0尚未打开任何标签。不要忘记在for循环后关闭最后一个标记

var checks = "<table border=1>";

for (var c = 0; c < tags_arr.length; c++){



    if (c%4 == 0){
         if (c > 0)
            checks += "</tr>"
         checks += "<tr>";

    }

    checks += "<td>" + tags_arr[c] + "</td>";

}
if (tags_arr.length > 0)
    checks += "</tr>"

Answer 4

for (var c = 0; c < tags_arr.length; c++){
    if (c%4 == 0){
        if (c > 0) {
            checks += "</tr>";
        }
        checks += "<tr>";
    }
    checks += "<td>" + tags_arr[c] + "</td>";
}
if (c > 0) { // Don't add a closing tag if there were no rows at all
    checks += "</tr>";
}

Answer 5

var cell = 0, len = tags_arr.length;
for(var row = 0; cell < len; row++) {
    checks += '<tr>';
    for(var col = 0; col < 4 && cell < len; col++, cell++)
        checks += '<td>' + tags_arr[cell] + '</td>'; 
    checks += '</tr>';
}

正确的解决方案 - 没有分歧，没有异常情况，没有额外的记忆。

将结束标记添加到循环内的HTML字符串

5 个答案: