1
00:00:00,720 --> 00:00:07,410
Under the build function that we created, we're going to construct a table all using JavaScript and

2
00:00:07,410 --> 00:00:11,820
then add it into the class, the element with a class of output.

3
00:00:11,850 --> 00:00:12,690
Let's begin.

4
00:00:12,810 --> 00:00:20,090
So first of all, we need our main table so we can create an element using documents, create elements

5
00:00:20,100 --> 00:00:26,100
and element that we want to create is table as our main table container that we're creating and constructing.

6
00:00:26,180 --> 00:00:33,870
The next part of it is that we want to add all of the rows and we can do that by looping through the

7
00:00:33,870 --> 00:00:36,590
my list, creating a simple loop.

8
00:00:36,600 --> 00:00:45,780
This can be a for loop so that I equals zero and the looping through while I is less than my list length

9
00:00:45,780 --> 00:00:47,650
incrementing, I buy one.

10
00:00:47,700 --> 00:00:54,870
So if we wait out of the loop next, let's create some rows and document create elements.

11
00:00:54,900 --> 00:00:58,130
And the element that we want to create is a role.

12
00:00:58,140 --> 00:01:02,180
So tr you can create any element you want within this type of format.

13
00:01:02,190 --> 00:01:05,850
And because this is an object, we can add a value to it.

14
00:01:06,060 --> 00:01:11,250
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

15
00:01:11,250 --> 00:01:12,930
going to use this later on.

16
00:01:13,140 --> 00:01:17,910
This is going to be corresponding to the index value of the items in my list.

17
00:01:18,150 --> 00:01:23,880
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

18
00:01:23,880 --> 00:01:24,270
need to.

19
00:01:24,390 --> 00:01:29,970
Next, let's create next we're going to create a table element, a TD, a table.

20
00:01:29,970 --> 00:01:32,460
So using the same format once again.

21
00:01:32,460 --> 00:01:36,960
So create an element that we're creating are to see what that looks like right now.

22
00:01:36,990 --> 00:01:38,030
So not a whole lot.

23
00:01:38,040 --> 00:01:39,680
Nothing's being output quite yet.

24
00:01:39,690 --> 00:01:41,850
And then within each one of the table sells.

25
00:01:41,860 --> 00:01:43,420
So we're going to probably create a few of these.

26
00:01:43,860 --> 00:01:50,400
So this cell is going to have an inner HTML and the contents of the cell are going to be the inner HTML

27
00:01:50,400 --> 00:01:51,680
of my list.

28
00:01:51,690 --> 00:01:56,880
So whatever the value is it as we're looping through the lists, we're going bananas, milk, apples,

29
00:01:56,880 --> 00:01:57,800
eggs, cake.

30
00:01:58,140 --> 00:02:02,350
So now that we've got that cell, we also want to provide a few other options.

31
00:02:02,390 --> 00:02:03,820
We want to create another cell.

32
00:02:04,050 --> 00:02:08,550
So how about we call this one cell one and we're going to create another cell.

33
00:02:08,550 --> 00:02:15,840
So we'll create a cell two and cell two is going to contain our button options that we can use in order

34
00:02:15,840 --> 00:02:18,160
to click and create some type of action.

35
00:02:18,180 --> 00:02:20,070
So let's add those ones in.

36
00:02:20,460 --> 00:02:22,200
So this is another table cell.

37
00:02:22,650 --> 00:02:25,950
And then within here, I want to create some clickable elements.

38
00:02:25,950 --> 00:02:27,810
So I know we're creating quite a few things.

39
00:02:28,020 --> 00:02:30,930
We can also start adding them on to the parents.

40
00:02:31,290 --> 00:02:34,730
So this cell can be added into the role in as well as the next cell.

41
00:02:34,980 --> 00:02:37,740
So let's add that in using append child.

42
00:02:37,980 --> 00:02:43,590
And what that will do is that gives us the ability to upend the newly created objects.

43
00:02:43,830 --> 00:02:50,100
And as we iterate through, we want to also append the roll to the table.

44
00:02:50,110 --> 00:02:53,240
So we want to use the table objects.

45
00:02:53,250 --> 00:02:56,790
That's the main table object using append child.

46
00:02:56,970 --> 00:03:00,110
And then we're going to spend each role at the end of that role.

47
00:03:00,330 --> 00:03:06,810
And then finally, let's output whatever the value of table is so we can see the table being constructed.

48
00:03:07,050 --> 00:03:09,660
So there's our table, we've got a role.

49
00:03:10,020 --> 00:03:11,090
We've got a cell.

50
00:03:11,100 --> 00:03:12,740
So the first cell has bananas.

51
00:03:12,930 --> 00:03:17,270
Next one's going to have milk, the next one is going to have apples and so on.

52
00:03:17,550 --> 00:03:23,190
So we want to add in a few other elements here within this table, within the cell.

53
00:03:23,340 --> 00:03:26,330
And that's going to give us the ability to delete and edit.

54
00:03:26,550 --> 00:03:31,260
So those are going to be two active elements where we're going to have different types of click events

55
00:03:31,260 --> 00:03:32,720
and click handlers on those.

56
00:03:33,000 --> 00:03:37,890
So adding those in and we can just simply add those into cell two.

57
00:03:38,190 --> 00:03:42,270
So the first one is going to be CONSED and this could be a span one.

58
00:03:42,510 --> 00:03:45,600
And again, using documents create elements.

59
00:03:45,600 --> 00:03:48,030
And I know we're creating a whole bunch of elements on the fly.

60
00:03:48,240 --> 00:03:53,030
And you could probably do it a whole lot easier with with just HTML.

61
00:03:53,070 --> 00:03:58,230
But of course this is JavaScript and we want to make sure that we have the ability to practice JavaScript.

62
00:03:58,470 --> 00:04:05,730
CSPAN one will have inner text of delete is going to be essentially our delete button and then once

63
00:04:05,730 --> 00:04:09,060
we're completed, we can add that in so we can append it.

64
00:04:09,270 --> 00:04:13,440
So taking cell two, we're going to append child to it.

65
00:04:13,650 --> 00:04:16,200
And the child that we're spending is spane one.

66
00:04:16,230 --> 00:04:18,150
No, we've got quite a lot going on here.

67
00:04:18,270 --> 00:04:24,300
I want to create some additional span's as well so we can also still call them the regular span's.

68
00:04:24,300 --> 00:04:26,190
But I like to keep them separate.

69
00:04:26,430 --> 00:04:30,370
So we'll have span two and the span to what this one is going to do.

70
00:04:30,390 --> 00:04:32,190
Is this going to allow us to edit?

71
00:04:32,190 --> 00:04:35,100
So adding all of that in let's see what this looks like now.

72
00:04:35,100 --> 00:04:41,730
So we've got our table, we've got our table cells and we haven't quite added them in yet to the role.

73
00:04:41,940 --> 00:04:45,380
And that's what we need to do next, where we need to append it to the role.

74
00:04:45,810 --> 00:04:51,790
So got a lot of different things happening here and this should add that other cell into our table.

75
00:04:52,080 --> 00:04:53,610
So now let's take a look at our table.

76
00:04:54,030 --> 00:04:58,140
So we've got our table cell, we've got the delete edit.

77
00:04:58,140 --> 00:04:59,940
So everything looks pretty good.

78
00:05:00,270 --> 00:05:06,990
And we're ready to finalize this table and added into the output, so append child and the child that

79
00:05:06,990 --> 00:05:11,790
we're spending is the table, so let's make it visible within our TEMEL.

80
00:05:12,450 --> 00:05:19,860
So do a quick refresh and make sure we need to add output as an object for taking output and selecting

81
00:05:19,860 --> 00:05:25,110
it using documents, query selector and selecting the element with a class of.

82
00:05:25,320 --> 00:05:28,500
And this time when we refresh it, we've got our list there.

83
00:05:28,500 --> 00:05:30,020
So we're ready to add that in.

84
00:05:30,570 --> 00:05:34,100
We also might want to add a little bit of styling now that we can see that content.

85
00:05:34,410 --> 00:05:38,310
So for the span's, let's add some styling in that.

86
00:05:39,180 --> 00:05:42,640
We'll do a smaller font size for those spans.

87
00:05:42,930 --> 00:05:46,740
We'll do a color of red so we can distinguish between them.

88
00:05:46,890 --> 00:05:52,980
And let's also add in some padding of five picks and you could also create classes and add classes as

89
00:05:52,980 --> 00:05:53,390
needed.

90
00:05:53,400 --> 00:05:58,770
Of course, go ahead and add in your JavaScript in order to generate your table on the fly, all using

91
00:05:58,770 --> 00:05:59,370
JavaScript.

92
00:05:59,700 --> 00:06:03,440
Coming up next, I'll show you how to create interaction with edit and delete.

93
00:06:03,450 --> 00:06:05,100
So that's coming up next in the Next Lesson.