jquery gets information from the background via AJAX to display on the table and supports row selection _jquery

Do not want to use the style of Easyui, but want his form function, originally was to go to the Internet to find relevant plug-ins, but did not find it began to write their own, did not think so simple.

Background code: (This is not important)

Public ActionResult getdicttypes ()
{
  var data = from A in dbo. Dicttypes
        Select New Dicttypelistviewmodel
        {
          ID = a.id,
          Name = a.name,
          lastchangeuser = A. Lastchangeuser,
          lastchangedate = a.lastchangedate,
          remark = A.remark
        };
  return Json (data. ToList ());
}

Page code:

<table class= "table" id= "dicttypetable" >
 <thead>
  <tr>
   <th>ID</th>
   <th> title </th>
   <th> Introduction </th>
  </tr>
 </thead>
 <tbody class= "sel" ></tbody>
</table>

JavaScript code: (Required in $ (document). Ready (called function ($) {})

function Showdicttype () {
  $ (' #DictTypeTable '). Children (' tbody '). empty ();
  $.ajax ({
    url:getdicttypes_url,
    type: ' Post ',
    dataType: ' JSON '
  })
   . Done (function (data) {
     var tbody = "";
     $.each (data, function (Index, EL) {
       var tr = "<tr>";
       TR + + "<td>" + el.id + "</td>";
       TR + + "<td>" + el. Name + "</td>";
       TR + + "<td>" + el. Remark + "</td>";
       TR = "</tr>";
       Tbody + = tr;
     });
     $ (' #DictTypeTable '). Children (' tbody '). Append (tbody);
     Binddicttypetableevent ();//Here is the bound event
   })
   . Fail (function () {
     alert ("ERR");
}

To bind an event after a table is generated:

function Binddicttypetableevent () {
  $ (' #DictTypeTable Tbody.sel '). Children (' tr '). Click (Function (event) {
    $ (this). Siblings (' tr '). Removeclass (' active ');//delete the selected effect of the other rows
    $ (this). addclass (' active '); increase the selected effect
    var id = $ ( This). Children (' td:eq (0) '). Text ()///Get ID
    showdictdata (ID),//operation code, here is another tabular data
  });
}

Finally, here is the code to get the ID of the selected entry:

function Gettypetableselectid () {return
  $ (' #DictTypeTable tbody.sel tr.active td:eq (0) '). text ();