JS Output w/ jquery

Markdown Table

Google markdown cheat sheet and it lead you to an outline for how to make a table.

Make	Model	Year	Color	Price
Ford	Mustang	2022	Red	$35,000
Toyota	Camry	2022	Silver	$25,00
Tesla	Model S	2022	White	$80,000
Cadillac	Broughan	1969	Black	$10,000
Ford	F-350	1997	Green	$15,000
Ford	Excursion	2003	Green	$25,000
Ford	Ranger	2012	Red	$8,000
Kuboto	L3301 Tractor	2015	Orange	$12,000
Ford	Fusion Energi	2015	Green	$15,000
Acura	XL	2006	Grey	$10,000
Ford	F150 Lightning	2023	Grey	$70,000

HTML Table

Google w3schools html table and it will lead you to a tutorial on how to make tables.

%%html
<table class="table">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
            <th>Color</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cadillac</td>
            <td>Broughan</td>
            <td>1969</td>
            <td>Black</td>
            <td>$10,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>F-350</td>
            <td>1997</td>
            <td>Green</td>
            <td>$15,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>Excursion</td>
            <td>2003</td>
            <td>Green</td>
            <td>$25,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>Ranger</td>
            <td>2012</td>
            <td>Red</td>
            <td>$8,000</td>
        </tr>
        <tr>
            <td>Kuboto</td>
            <td>L3301 Tractor</td>
            <td>2015</td>
            <td>Orange</td>
            <td>$12,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>Fusion Energi</td>
            <td>2015</td>
            <td>Guard</td>
            <td>$25,000</td>
        </tr>
        <tr>
            <td>Acura</td>
            <td>XL</td>
            <td>2006</td>
            <td>Grey</td>
            <td>$10,000</td>
        </tr>
        <tr>
            <td>Ford</td>
            <td>F150 Lightning</td>
            <td>2024</td>
            <td>Guard</td>
            <td>$70,000</td>
        </tr>
    </tbody>
</table>

Make	Model	Year	Color	Price
Cadillac	Broughan	1969	Black	$10,000
Ford	F-350	1997	Green	$15,000
Ford	Excursion	2003	Green	$25,000
Ford	Ranger	2012	Red	$8,000
Kuboto	L3301 Tractor	2015	Orange	$12,000
Ford	Fusion Energi	2015	Guard	$25,000
Acura	XL	2006	Grey	$10,000
Ford	F150 Lightning	2024	Guard	$70,000

HTML Table with JavaScript jquery

JavaScript is a programming language that works with HTML data, CSS helps to style that data. In this example, we are using JavaScript and CSS that was developed by others (3rd party). Addithing the 3rd party code makes the table interactive.

Look at the href and src on lines inside of the lines in <head> tags. This is adding code to our page from others.
Observe the <script> tags at the bottom of the page. This is generating the interactive table, from the third party code, using the data <table id="demo"> from the <body>.

%%html

<!-- Head contains information to Support the Document -->
<head>
    <!-- load jQuery and DataTables output style and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

<!-- Body contains the contents of the Document -->
<body>
    <table id="demo" class="table">
        <thead>
            <tr>
                <th>Make</th>
                <th>Model</th>
                <th>Year</th>
                <th>Color</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ford</td>
                <td>Mustang</td>
                <td>2022</td>
                <td>Red</td>
                <td>$35,000</td>
            </tr>
            <tr>
                <td>Toyota</td>
                <td>Camry</td>
                <td>2022</td>
                <td>Silver</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Tesla</td>
                <td>Model S</td>
                <td>2022</td>
                <td>White</td>
                <td>$80,000</td>
            </tr>
            <tr>
                <td>Cadillac</td>
                <td>Broughan</td>
                <td>1969</td>
                <td>Black</td>
                <td>$10,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>F-350</td>
                <td>1997</td>
                <td>Green</td>
                <td>$15,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>Excursion</td>
                <td>2003</td>
                <td>Green</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>Ranger</td>
                <td>2012</td>
                <td>Red</td>
                <td>$8,000</td>
            </tr>
            <tr>
                <td>Kuboto</td>
                <td>L3301 Tractor</td>
                <td>2015</td>
                <td>Orange</td>
                <td>$12,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>Fusion Energi</td>
                <td>2015</td>
                <td>Guard</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Acura</td>
                <td>XL</td>
                <td>2006</td>
                <td>Grey</td>
                <td>$10,000</td>
            </tr>
            <tr>
                <td>Ford</td>
                <td>F150 Lightning</td>
                <td>2024</td>
                <td>Guard</td>
                <td>$70,000</td>
            </tr>
        </tbody>
    </table>
</body>

<!-- Script is used to embed executable code -->
<script>
    $("#demo").DataTable();
</script>

Make	Model	Year	Color	Price
Ford	Mustang	2022	Red	$35,000
Toyota	Camry	2022	Silver	$25,000
Tesla	Model S	2022	White	$80,000
Cadillac	Broughan	1969	Black	$10,000
Ford	F-350	1997	Green	$15,000
Ford	Excursion	2003	Green	$25,000
Ford	Ranger	2012	Red	$8,000
Kuboto	L3301 Tractor	2015	Orange	$12,000
Ford	Fusion Energi	2015	Guard	$25,000
Acura	XL	2006	Grey	$10,000
Ford	F150 Lightning	2024	Guard	$70,000

Hacks

This lesson teaches you about tables. In this hack, it is important that you analze the difference in the styles of output shown.

Make your own tables, with data according to your interests.
Describe a benefit of a markdown table.
Try to Style the HTML table using w3schools.
Describe the difference between HTML and JavaScript.
Describe a benefit of a table that uses JavaScript.

%%html

<!-- Head contains information to Support the Document -->
<head>
    <!-- load jQuery and DataTables output style and scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>var define = null;</script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>

<!-- Body contains the contents of the Document -->
<body>
    <table id="test" class="table">
        <thead>
            <tr>
                <th>Champion</th>
                <th>Winrate</th>
                <th>Most played Lane</th>
                <th>Broken?</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ksante</td>
                <td>46.40%</td>
                <td>Top</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Kennen</td>
                <td>48.18%</td>
                <td>Top</td>
                <td>No</td>
            </tr>
            <tr>
                <td>Fiora</td>
                <td>50.79%</td>
                <td>Top</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Xerath</td>
                <td>51.06%</td>
                <td>Support</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Illaoi</td>
                <td>51.18%</td>
                <td>Top</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Shaco</td>
                <td>50.31%</td>
                <td>Jungle</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Akshan</td>
                <td>51.65%</td>
                <td>Mid</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Yone</td>
                <td>50.14%</td>
                <td>Mid</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Cho'Gath</td>
                <td>51.11%</td>
                <td>Top</td>
                <td>No</td>
            </tr>
            <tr>
                <td>Heimerwiener</td>
                <td>50.75%</td>
                <td>Support</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td>Urgot</td>
                <td>50.73%</td>
                <td>Top</td>
                <td>No</td>
            </tr>
        </tbody>
    </table>
</body>

<!-- Script is used to embed executable code -->
<script>
    $("#test").DataTable();
</script>

Champion	Winrate	Most played Lane	Broken?
Ksante	46.40%	Top	Yes
Kennen	48.18%	Top	No
Fiora	50.79%	Top	Yes
Xerath	51.06%	Support	Yes
Illaoi	51.18%	Top	Yes
Shaco	50.31%	Jungle	Yes
Akshan	51.65%	Mid	Yes
Yone	50.14%	Mid	Yes
Cho'Gath	51.11%	Top	No
Heimerwiener	50.75%	Support	Yes
Urgot	50.73%	Top	No

There are many benefits of using the Javascript Table over the basic HTML table, but all of them stem from the added functionality. Being able to view the data as multiple tables, order and organize the data, and search for specific entries makes it very useful and those are all things that a basic HTML table can’t do.

var total = [];
var avgList = [];
for (let i = 0; i < 500; i ++){
    total = 0;
    for (let i = 0; i < 100; i ++){
        total += Math.floor(Math.random() * 2)
    }
    avgList.push(total/100)
}
avgList.sort()
console.log(avgList)
console.log(getStandardDeviation(avgList))

function getStandardDeviation (array) {
    const n = array.length
    const mean = array.reduce((a, b) => a + b) / n
    return Math.sqrt(array.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n)
  }
  

[
33, 0.34, 0.36, 0.38, 0.38, 0.38, 0.39, 0.39,  0.4,  0.4,
4,  0.4,  0.4,  0.4,  0.4,  0.4,  0.4, 0.41, 0.41, 0.41,
41, 0.41, 0.42, 0.42, 0.42, 0.42, 0.42, 0.42, 0.42, 0.42,
43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.43,
43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.44, 0.44,
44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44,
44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.45, 0.45, 0.45,
45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45,
45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45,
45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.46,
  ... 400 more items
]
051338032685330034

JS Output w/ jquery • 17 min read

Description

Markdown Table

HTML Table

HTML Table with JavaScript jquery

Hacks