如何在jQuery的setInterval之后保留切换类名

Question

我正在尝试使用setInverval函数每15秒更新一次表，同时还能保留设置的toggleClass名称，这会突出显示表中单击的行。

问题是一旦执行了setInterval，它就会清除所选的行，之后我也无法选择任何行。知道我做错了吗？

这是代码，但是对于静态数据，在执行setInverval之后似乎没有重新填充表行（从数据库调用时工作正常）。

https://jsfiddle.net/karlinit/Lfq90z8j/

HTML

<div id="refresh">
    <table id="myTable"  class="table">
        <tr>
            <th class="col_1">TH1_Data</th>
            <th class="col_2">TH2_Data</th>
            <th class="col_2">TH3_Data</th>
            <th class="col_3">TH4_Data</th>
            <th class="col_3">TH5_Data</th>
            <th class="col_3">TH6_Data</th>
        </tr>
        <tr align="center" class="portRow">
            <td class="col_1">Col1_Data</td>
            <td class="col_2">Col2_Data</td>
            <td class="col_2">Col3_Data</td>
            <td class="col_3">Col4_Data</td>
            <td class="col_3">Col5_Data</td>
            <td class="col_3">Col6_Data</td>
        </tr>
    </table>
</div>

的JavaScript

//  Highlight td row on click. BG color defined in CSS
$("#myTable").on('click','.portRow',function(e){
        e.preventDefault();
        $(this).toggleClass("selected");
        $(".port").toggleClass("tagged");
});
// 15 second interval to refresh tableRefresh function
setInterval("tableRefresh();",15000);

// tableRefresh Function: Defines what HTML ID to refresh
function tableRefresh(){
   $('#refresh').load(location.href + ' #myTable');
}

CSS

#myTable {
float:left;
border:1px solid #dfdfdf;
border-collapse:collapse;
width:100%;
  }

  .selected {
      background: #00afd7;
  }