如何添加此代码以使我的表列在单击时可排序？

<table>
  <thead>
    <tr>
      <th class="sortable" onclick="sortTable(0)">列1</th>
      <th class="sortable" onclick="sortTable(1)">列2</th>
      <th class="sortable" onclick="sortTable(2)">列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

function sortTable(columnIndex) {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementsByTagName("table")[0];
  switching = true;
  
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("tr");
    
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[columnIndex];
      y = rows[i + 1].getElementsByTagName("td")[columnIndex];
      
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

th.sortable {
  cursor: pointer;
}

th.sortable:after {
  content: "";
  float: right;
  margin-top: 5px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #000000 transparent;
  visibility: hidden;
}

th.sortable.asc:after {
  visibility: visible;
  transform: rotate(180deg);
}

th.sortable.desc:after {
  visibility: visible;
}