创建一个div表

Question

我想在html中创建一个16 * 16表，该表在每个单元格中包含div容器。 我不确定在何种程度上可以混合使用jquery和纯javascript，但是我所拥有的是

    $( document ).ready(function() {
    var table = Doucument.getElementById('table');
    for (var i = 0; i <16; i++) {
        var row = table.insertRow(i);
        for(var j = 0; j < 16; j++){
            row.insertCell(i);

        }

    };
});

这是向我的表添加一行，然后添加16个单元格。 但是我不确定如何将div元素添加到每个单元格。 也许有一种使用jquery的更简单方法？ 我不太精通jquery

Answer 1

将“文档”更改为“文档”，从insertRow（）和insertCell方法中删除循环索引（i，j），并捕获新插入的单元格，以便可以对其进行填充。 在下面的示例中，我将每个div的ID设置为行和单元格编号的组合。

我还应该指出，有更好的方法可以做到这一点。 表仅应用于显示需要表的数据。 同样，除非有理由不希望使用JavaScript进行操作，否则此类操作最好在服务器端进行。

话虽如此，这是一个使用JavaScript的有效示例：

HTML：

<table id="myTable"></table>

JavaScript：

$(document).ready(function () {
    var table = document.getElementById('myTable');
    for (var i = 0; i < 16; i++) {
        var row = table.insertRow();
        for (var j = 0; j < 16; j++) {
            var cell = row.insertCell();
            var id = 'r' + i + 'c' + j;
            cell.innerHTML = '<div id="' + id + '">' + id + '</div>';
        }
    };
});

CSS（阅读有关控制尺寸的评论后）：

#myTable TD DIV {
    height: 30px;
    width: 30px;
}

演示： http ： //jsfiddle.net/BenjaminRay/ugm613zg/

Answer 2

您是否有创建“表”的特定原因-UX和CSS专家对此并不满意。 考虑使用Div / Spans和CSS创建类似表格的布局是一种更好的方法。 有可用的框架可以立即为您提供此布局样式。

Bootstrap的网格是最受欢迎的网格之一-以下是一些布局示例-http://getbootstrap.com/examples/grid/ 。 使用此方法而不是表格的好处是，您的布局将更好地适应屏幕尺寸的变化，例如在移动设备上查看（称为响应式布局）。

为了完全公开，Bootstrap支持开箱即用的12列-但可以对16列和24列进行修改- 如何使用16或24列的引导程序 。

与整体表相比，这是一条更长的路线，但却是更好的解决方案。

Answer 3

使用jQuery，您可以执行以下操作。

 function addElems(ele, howMany, append) { var $items = $(); for (var i = 0; i < howMany; i++) { var $ele = $("<" + ele + "/>"); typeof append !== "undefined" && $ele.append(append); $items = $items.add($ele); } return $items; } var $table = $("#myTable").append("<tbody></tbody>"); var $trs = addElems('tr', 16); $table.append($trs); $table.find("tbody > tr").each(function() { var $tds = addElems('td', 16, "<div>My Div</div>"); $(this).append($tds); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"></table>