Create a row of cells (DIVs) using Javascript/Jquery

Question

I'm trying to create a row of multiple divs using Javascript or jquery; say 32 tiny DIVs. Since the size is not fixed, I can simply use HTML. Table cells could also be an alternative, but since I need the click ID, and their color should change later, it is better to go for DIV.

I did it, but the divs are getting vertical instead of horizontal. What I want to do is exactly the notion of Sliding window in TCP. Look at the row of ack'ed packets on top of this simulation: http://histrory.visualland.net/tcp_swnd.html

I want for instance after a button click, the sliding window move to the right one step.

This is my project, simulating the above link for TCP: http://jsfiddle.net/j26Qc/47/

partial code for row of DIVs:

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

show the code you are using, divs default to a display:block style so they will show underneath each other. to get them to show next to each other change their css display style to inline-block. — Patrick Evans
– Patrick Evans, Commented Feb 13, 2014 at 2:10

Patrick Evans · Accepted Answer · 2014-02-13 02:25:18Z

2

You need to change the display style of the divs, they default to display:block, so what you are wanting to do is give them inline-block style.

JS

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

CSS

.inline {
   display:inline-block;
}

To get them to look like the little blocks in your link, you would need to add additional styling

CSS

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

note that in your fiddle your .table class is only 150px so this would make some of them wrap around, either make the text and size of the divs smaller or make your .table class longer.

edited Feb 13, 2014 at 2:25

answered Feb 13, 2014 at 2:14

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

angel_30 Over a year ago

Donno why the numbers are not shown...Can you please take a look at my fiddle? update 48

Patrick Evans Over a year ago

@TinaJasmin, cant seem to see the 48 version, here is a updated version that i modified jsfiddle.net/j26Qc/49

Collectives™ on Stack Overflow

Create a row of cells (DIVs) using Javascript/Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related