Under the build function that we created, we're going to construct a table all using JavaScript and
then add it into the class, the element with a class of output.
Let's begin.
So first of all, we need our main table so we can create an element using documents, create elements
and element that we want to create is table as our main table container that we're creating and constructing.
The next part of it is that we want to add all of the rows and we can do that by looping through the
my list, creating a simple loop.
This can be a for loop so that I equals zero and the looping through while I is less than my list length
incrementing, I buy one.
So if we wait out of the loop next, let's create some rows and document create elements.
And the element that we want to create is a role.
So tr you can create any element you want within this type of format.
And because this is an object, we can add a value to it.
So I can add an index value if I want it to, and I'm going to just match that index value because we're
going to use this later on.
This is going to be corresponding to the index value of the items in my list.
So I'm adding it in as an index value so we're able to select the item back out of the list when we
need to.
Next, let's create next we're going to create a table element, a TD, a table.
So using the same format once again.
So create an element that we're creating are to see what that looks like right now.
So not a whole lot.
Nothing's being output quite yet.
And then within each one of the table sells.
So we're going to probably create a few of these.
So this cell is going to have an inner HTML and the contents of the cell are going to be the inner HTML
of my list.
So whatever the value is it as we're looping through the lists, we're going bananas, milk, apples,
eggs, cake.
So now that we've got that cell, we also want to provide a few other options.
We want to create another cell.
So how about we call this one cell one and we're going to create another cell.
So we'll create a cell two and cell two is going to contain our button options that we can use in order
to click and create some type of action.
So let's add those ones in.
So this is another table cell.
And then within here, I want to create some clickable elements.
So I know we're creating quite a few things.
We can also start adding them on to the parents.
So this cell can be added into the role in as well as the next cell.
So let's add that in using append child.
And what that will do is that gives us the ability to upend the newly created objects.
And as we iterate through, we want to also append the roll to the table.
So we want to use the table objects.
That's the main table object using append child.
And then we're going to spend each role at the end of that role.
And then finally, let's output whatever the value of table is so we can see the table being constructed.
So there's our table, we've got a role.
We've got a cell.
So the first cell has bananas.
Next one's going to have milk, the next one is going to have apples and so on.
So we want to add in a few other elements here within this table, within the cell.
And that's going to give us the ability to delete and edit.
So those are going to be two active elements where we're going to have different types of click events
and click handlers on those.
So adding those in and we can just simply add those into cell two.
So the first one is going to be CONSED and this could be a span one.
And again, using documents create elements.
And I know we're creating a whole bunch of elements on the fly.
And you could probably do it a whole lot easier with with just HTML.
But of course this is JavaScript and we want to make sure that we have the ability to practice JavaScript.
CSPAN one will have inner text of delete is going to be essentially our delete button and then once
we're completed, we can add that in so we can append it.
So taking cell two, we're going to append child to it.
And the child that we're spending is spane one.
No, we've got quite a lot going on here.
I want to create some additional span's as well so we can also still call them the regular span's.
But I like to keep them separate.
So we'll have span two and the span to what this one is going to do.
Is this going to allow us to edit?
So adding all of that in let's see what this looks like now.
So we've got our table, we've got our table cells and we haven't quite added them in yet to the role.
And that's what we need to do next, where we need to append it to the role.
So got a lot of different things happening here and this should add that other cell into our table.
So now let's take a look at our table.
So we've got our table cell, we've got the delete edit.
So everything looks pretty good.
And we're ready to finalize this table and added into the output, so append child and the child that
we're spending is the table, so let's make it visible within our TEMEL.
So do a quick refresh and make sure we need to add output as an object for taking output and selecting
it using documents, query selector and selecting the element with a class of.
And this time when we refresh it, we've got our list there.
So we're ready to add that in.
We also might want to add a little bit of styling now that we can see that content.
So for the span's, let's add some styling in that.
We'll do a smaller font size for those spans.
We'll do a color of red so we can distinguish between them.
And let's also add in some padding of five picks and you could also create classes and add classes as
needed.
Of course, go ahead and add in your JavaScript in order to generate your table on the fly, all using
JavaScript.
Coming up next, I'll show you how to create interaction with edit and delete.
So that's coming up next in the Next Lesson.