00:06This video will demonstrate the creation of an HTML table and a JavaScript search function.
00:13which creates a folder called table followed by a file search dot html
00:18Within this, we type html, search for html 5, press enter, and the default code appears.
00:34Let's go to title and write data table
00:41Now we go to Google and search for Bootstrap. Within Bootstrap, we go to Documents.
00:48We look for CDN links, which are a network of interconnected servers that speeds up loading.
00:53from web pages to applications, in this case for CSS and JavaScript programming
00:59in your cache
01:21We searched for "table" and found the different types of tables that Bootstrap offers.
01:49We selected the tablet type: tablet stripe
01:57Now in the HTML file we copy the CDNs and paste them into the head and body sections. Later, at the end...
02:06It will copy the Bootstrap CDN link for the body, and then we'll start with the table class.
02:15Similarly, tablets tripped here defines the table type and style of the Bootstrap box model
02:37We start with the heading h1 search in the content slash h1 h1 is a tag
02:44of level 1 heading used to display the main title of the page in
02:49This case indicates that the page is designed to search within the content
03:01search form form slash form form starts an html form text to search
03:10input id equals search term type equals text although youtube equals two search forward slashes
03:16The text to search for is text displayed next to the input field. The input field is an input field.
03:23of
03:23text id equals search term assigns an identifier search term to the input field this identifier
03:32`type` will be used in the JavaScript script later. `type` equal to `text` indicates that the input field is...
03:39of text type although I pigo a la dos search calls the dos search function every time it
03:45release one
03:45The key in the input field is used to activate real-time search while the user types.
03:55and
04:25The Church of Jesus Christ of Latter-day Saints
04:28Data table, table, slash table
04:31Table class equals, table striped, id equals, data
04:36Start an HTML table with the Bootstrap class, table table striped, and an id, datos, to easily reference it
04:45This HTML code snippet represents a row of headings, TH, in a table
04:51Each TH contains a header for a specific data column
05:25Here is the detailed analysis
05:26Within this row, data cells or header cells, TDA or TH, are usually placed.
05:35This HTML code snippet represents a row of data, TR, in a table
05:41Each TD, that data cell, contains specific information for each column corresponding to the row
05:48Here is the detailed analysis
05:50HTML, TR, tag, TDA1, slash TD, TD, John, slash TD, tag, TD, Smith, slash TD, tag, TD,
06:02M, slash TD, label, TD30, slash TD, label, slash TR, label, TR
06:10This tag defines a row in an HTML table
06:14In this case, it represents a row of data
06:29We repeat the same thing, changing the names, age, among other details
06:58It is important to clarify here that each row of data, whether or not it is a string, in the table
07:02And each TD represents the cells where the information for each row goes.
07:21Thank you!
07:21Thank you!
07:21Thank you!
07:37Thank you!
07:59This line of HTML code, TR, clasihuala, no sech
08:03hate, represents an additional row in a
08:05table that will be used to handle specific situations related to data retrieval
08:10in the table. Here is the detailed analysis, HTML, TR class equal to, no search hide, TR,
08:17This tag defines a row in an HTML table, similar to rows that contain data.
08:34The data cell of calspin equal to, 5, greater than less than slash tda has a property
08:40A special function called calspin is used to specify how many columns a cell in a table should occupy.
08:47HTML, TR class equal to, 5, greater than less than slash tda tda, this tag defines a cell of
08:54data in an HTML table.
09:05And we paste the CDN link, where it specifies the script source, which is the Bootstrap library provided by
09:13the external link.
09:14This library improves the design and functionality of certain HTML elements, and we format the document.
09:26Once the HTML file is finished, we create the JavaScript file, called buscar.js.
09:38To do this, we type in head, write less than script.scr equal to buscar.js, and close the script.
09:51And we begin the show.
09:54Function two search.
09:55This line defines a function in JavaScript called two search.
10:00This function will likely be called every time the user enters text in the search field.
10:05probably linked to the on key up event in your HTML input field.
10:24This JavaScript code appears to be a function called two search that performs a search in an HTML table and
10:30displays the search results.
10:32Here is a general summary of the code.
10:351. Obtaining references to HTML elements.
10:39Here, the function gets references to HTML elements by using document.
10:46GetElementById for the element with the id, data, presumably a table,
10:50and, searchterm, presumably a search field.
10:58Thank you!
11:00Thank you!
11:18Thank you!
11:31Thank you!
11:31Thank you!
11:32Thank you!
11:49Thank you!
11:512. Initialization of variables
11:54A total variable is initialized to zero.
11:57This variable will be used to track the total number of matches found during the search.
12:05Hot organizations we are vici until zero.
12:07And thanks be to Allah
12:20A classroom is initialized to zero-po Skills
12:201. No
12:53Thanks for watching the video.
12:553. Searching in the table.
12:58The function iterates through all rows of the table, except those with the class, in no search, for each cell
13:04In the row, compare the content with the search text.
13:08If a match is found, increment the total variable and display the row; otherwise, hide the row.
13:243. Searching in the table.
14:104. Display search results.
14:14After performing the search, the function displays the total number of matches found or a message indicating that there were no matches.
14:20matches were found.
14:22This result is shown in the last row of the table.
14:265. Searching in the table.
15:24Once we have
15:25The programming, we move on to see the result, we observe the operation which is the
15:34That's correct, if typing a letter shows us the search result, then so does the same.
15:43when typing a number or the initial of a word or name.
15:50That's all, if you found the video helpful, don't forget to subscribe.
15:55Thank you!
Comentarios