创建div的表格

我想在html中创建一个16 * 16的表格，在每个单元格中都容纳div容器。我不知道到我被允许什么程度混合jQuery和纯JavaScript，但我有什么是创建div的表格

$(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

来源

2015-03-30 user4348719

使用'Doucument'，上面的代码是否真的起作用或者是一个错字？ – lshettyl 2015-03-30 22:04:27

目前它没有显示任何东西，但是我注意到并修复了错误 – user4348719 2015-03-30 22:21:45

将“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/

来源

2015-03-30 22:28:42

谢谢！你知道我会如何调整div的高度和宽度吗？ – user4348719 2015-03-30 22:51:46

为什么'TD'和'DIV'有上限的原因？也谢谢，你的回答非常有帮助！ – user4348719 2015-03-30 23:13:00

没理由;它们不区分大小写。 “td”和“div”会很好。 – 2015-03-30 23:15:08

使用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>

来源

2015-03-30 22:40:16 lshettyl

你有特殊原因需要创建一个“表” - 它是由UX和CSS专家皱眉。考虑使用Div/Spans和CSS创建表格式布局被认为是更好的方法。有框架可以为您提供这种开箱即用的布局风格。

其中一个最流行的是Bootstrap的网格 - 这里有一些布局示例 - http://getbootstrap.com/examples/grid/。使用这种方法而不是表格的好处是，您的布局可以更好地适应屏幕尺寸变化，例如在移动设备上观看（称为响应式布局）。

为了充分披露，Bootstrap支持12列开箱即用 - 但修改适用于16列和24列 - How to use bootstrap with 16 or 24 columns。

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

来源

2015-03-30 22:51:49

这个问题没有提及它的用途 - 表格可能正是他们正在寻找的东西。 – Jorg 2015-03-30 23:27:15

由于各种原因，老式浏览器的性能以及可嵌套表格数量的限制，表格被用于多年来的布局是关注的问题。随着现代网页的响应能力（移动和平板电脑友好布局）是一个问题。无数表设计在过去十年中有很多材料。这里是一个漫画，将有助于更好地解释我的观点 - https://www.hotdesign.com/seybold/everything.html – 2015-03-30 23:34:15

我完全理解。只是这个问题没有提到这是用于布局的。 – Jorg 2015-03-30 23:40:16

创建div的表格

回答

相关问题