JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<div>
  <table border="1" id="table">
    <tr class="class1">
      <th>Year</th>
      <th>Savings</th>
    </tr>
    <tr class="class2">
      <td>2014</td>
      <td>$10000</td>
    </tr>
    <tr class="class3">
      <td>2015</td>
      <td>$8000</td>
    </tr>
    <tr class="class4">
      <td>2016</td>
      <td>$9000</td>
    </tr>
  </table>

  <p>
    <input id="button1" type="button" value="Click to remove all rows except first one" />
  </p>
</div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#table td {
  padding: 25px;
  font-size: 25px;
  text-align: center;
}

#table th {
  font-size: 30px;
  padding: 25px
}

div {
  display: block;
}

JavaScript

$("#button1").click(function() {
  $("table").find("tr:not(:nth-child(1))").remove();
});

$("tr").click(function() {
  $(this).append($("<td>", {
    text: $(this).attr("class")
  }));
});