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

将“Document”更改为“document”，从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

您是否有特定的理由来创建＆＃34;表＆＃34; - UX和CSS专家不赞成这一点。考虑使用Div / Spans和CSS创建类似于表格的布局被认为是更好的方法。有一些框架可以为您提供开箱即用的布局样式。

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

为了完全公开，Bootstrap支持12列开箱即用 - 但可以对16列和24列进行修改 - How to use bootstrap with 16 or 24 columns。

这是一条较长的路线，但比整体表格更好。

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>

创建一个div表

3 个答案: