Change CSS after button is clicked

Change CSS after button is clicked

Hey guys! So I have this assignment I am working on, and what I am trying to do is after the buttons I have are clicked I want the css to change. For example I have a button called Format Table, and when clicked it changes the background color of the first row. Im not looking for code...more of a like a push in the right direction. I have done some research and looking online, and to me the easiest thing or more neat thing would be to use the addClass? If not what would be more practical? Anyway I tried doing that just to change the color of my buttons as a test first, but did not get anywhere. From the examples I have seen the addClass css doesnt come into play until the button is clicked.

  1. my HTML
    <!DOCTYPE html>
<html = "en">
<head>
    <meta charset = "utf-8">
    <title>Assignment 3</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="assignment3.js"></script>
    <link rel="stylesheet" href="assignment3.css">
    <meta name="description" content=" ">
 </head>

 <body>
   <div id="myList">
        <ol>
             <li>Accounting</li>
             <li>Business</li>
             <li>Computer Programming</li>
             <li>Criminal Justice</li>
             <li>Nursing</li>
             <li>Horticulture</li>
        </ol>
   </div>

   <div id="myTable">
        <table>
          <tr>
            <th>Name</th>
            <th>ID</th> 
          </tr>

          <tr>
            <td>Internet Scripting</td>
            <td>CPT 238</td> 
          </tr>

          <tr>
            <td>Macroeconomics</td>
            <td>ECO 210</td> 
          </tr>

          <tr>
            <td>Lighting</td>
            <td>ARV 213</td> 
          </tr>

          <tr>
            <td>Advanced Cakes</td>
            <td>BKP 210</td> 
          </tr>
        </table>
   </div>

   <div id="myActions" class="Actions">
        <ul>
            <li><button id="Format">Format Table</button></li>
            <p></p>
            <li><button id="Image">Add Image</button></li>
            <p></p>
            <li><button id="Borders">Add Red Borders</button></li>
        </ul>
   </div>

   <div id="myImage">
        <!-- No content required -->
   </div>
 </body>
 </html>


    JavaScript

    $('#Format').on('click',function(){
    $(this).addClass('Tablef');
});

    
    
    
     
    
    




    CSS


    body{
	background-color: tan;
}

div{
	font-size: 20pt;
}

ul {
	list-style-type: none;
}

table {
    width: 400px;
}

ol{
	font-family: Arial;
}

#myList > ol >li:first-child{
   color: red;
}​
#myList > ol >li:nth-child(4){
   color: green;
}

#myList > ol >li:last-child{
   color: blue;
}​
.Tablef{
	background-color: red;
}