添加行后，使用JavaScript对表进行排序

Question

我已经搜索并尝试了许多不同的Javascript / jQuery选项，但似乎没有一个在我的情况下工作。我有一个表，我按下按钮后生成，表是逐行生成的。

HTML：

<table border="0" cellspacing="10" cellpadding="1" id="Sort_This_Table">
  <tr>
    <th>Col1</th>
    <th>Col2</th>
  </tr>
</table>

JavaScript的：

var tableRef = document.getElementById("Sort_This_Table");
if (tableRef.rows.length > 1){for(var i = tableRef.rows.length - 1; i > 0; i--){tableRef.deleteRow(i);}}

for (i = 0; i < data.data.length; i++) {
    var newRow   = tableRef.insertRow(tableRef.rows.length);
    var newCell  = newRow.insertCell(0);
    newCell.innerHTML = data.data[i].col1;
    newCell.style.textAlign = 'center';
    var newCell  = newRow.insertCell(0);
    newCell.innerHTML = data.data[i].col2;
    newCell.style.textAlign = 'center';
}

我希望能够通过单击列标题“Col1”或“Col2”对此表进行排序。有什么想法吗？