我想在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

#1楼 票数:2 已采纳

将“文档”更改为“文档”,从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/

#2楼 票数:1

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

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

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

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

#3楼 票数:0

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

  ask by user4348719 translate from so

未解决问题?本站智能推荐:

3回复

每3个可见的div创建一个div

我想在每个可见的3个div之后显示一个“容器”。 因为跟随过滤器,每个div都被隐藏或不被隐藏。 我希望插座在每个3节之后......但是如果物品在线上结束了一两个,就在它们后面放一个插座。 例如:HTML JS CSS 小提琴: http : //jsfiddle.net
2回复

创建一个div并放置它

我想创建一些div并将它放在身体周围。 这意味着左,右,上,下。 每次客户端通过套接字连接时我都会创建一个div。 这是代码 这是div的风格: 我怎样才能做到这一点 ?
3回复

创建一个较小的div副本?

我有一个充满文字,照片等的div。它是动态生成的,通常比例高度:宽度约为10:1。 我想在同一页面上创建这个div的副本,但是它的宽度是1/8。 编辑:所有内容也应该是1/8比例。 这个瘦高的概述div不需要能够与之交互,只需准确地显示其他较大div的内容。 任何想法我将如何/应
2回复

创建一个div子数组

我有一些输入行。 我想为包含输入值的每一行创建一个数组。 因此,如果我有3行,并且'input1'的值是1,'input2'的值是2而'input3'的值是3,则数组如下所示: 这是我的HTML代码: 如何在jQuery中做到这一点?
3回复

通过单击按钮创建一个div

我想通过单击包含表单的按钮来创建div 。 每个div(窗体)都包含有关一个平面的信息。 当我单击保存按钮时, 每个平面都保存在数据库中。 我已经开始意识到表单,但是我不知道如何通过单击按钮来添加这些div。 我试图使用$( ".div_avion" ).clone().appendTo
3回复

创建一个可移动的div元素

当用户将鼠标悬停在div标记中我的div内的文本时,我试图创建一个移动div。 我只希望div在发生这种情况时移动几个像素。 我也不希望div在浏览器中滚动,所以我希望它在它具有的浏览器空间内。 我将如何创建这些界限? 我该如何使div移动。 我应该使用jquery还是JavaScri
1回复

创建一个标签表

我想创建一个标签表,用户可以单击该标签并将其添加到单独的提交输入中。 同样,如果他们添加了不再需要的主题标签,则可以单击该主题标签,然后将其返回到表中。 该表将如下所示: 基本上,这与提交问题之前的堆栈溢出的“标签”部分相同。 关于插件/代码段的任何想法,还是用HTML / jQu
2回复

在悬停时创建多个div(或表)

我正在尝试创建一个比较基本的日历。 这是我的HTML: 悬停时,我希望显示特定月份的日期。 不必像这样为每个月创建表格: 或每个月创建35个div,是否可以创建一个表或一组每个月可以使用的div? 显然,问题在于月份之间的安排和天数不同。 是否可以编写脚本来适应这种情况? 这