使用Javascript / Jquery创建一行单元格（DIV）

Question

我正在尝试使用Javascript或jquery创建一行多个div;说32个小DIV。由于大小不固定，我可以简单地使用HTML。表格单元格也可以替代，但由于我需要点击ID，并且它们的颜色应该稍后更改，最好去DI​​V。

我做到了，但是div正在变为垂直而不是水平。我想要做的就是TCP中滑动窗口的概念。在此模拟之上查看一行ack'ed数据包：http://histrory.visualland.net/tcp_swnd.html

我希望例如在点击按钮后，滑动窗口向右移动一步。

这是我的项目，模拟TCP的上述链接：http://jsfiddle.net/j26Qc/47/

DIV行的部分代码：

for(var i=1;i<=16;i++){
   $('#table').append("<div id='"+i+"'>"+i+"</div>");
}

Answer 1

你需要改变div的显示风格，它们默认显示：block，所以你想要的是给它们内联块样式。

JS

for(var i=1;i<=16;i++){
   $('#table').append('<div class="inline" id="'+i+'">'+i+'</div>');
}

CSS

.inline {
   display:inline-block;
}

要让它们看起来像链接中的小块，您需要添加其他样式

CSS

.inline {
   display:inline-block;
   width:20px;
   height:20px;
   border:1px solid;
   text-align:center;
}

请注意，在您的小提琴中，您的.table类只有150px，因此这会使其中的一些包围，或者使div的文本和大小变小或使.table类更长。