javascript - 我可以使用 angularJS/Jquery/Javascript 对静态 html 表进行排序吗？

Question

背景信息是我有一个表，它必须是静态信息而不是 javascript。该表将由不懂 HTML 或 Javascript 的人编辑。因此，每次他们获得新教员时，他们都会加入并编辑表格的 GUI 表示。我已经设置了编辑后将导出的内容的代码笔。

这是用户完成添加人员后将导出的内容的 HTML 标记。

http://codepen.io/ddavisgraphics/pen/VYWmRo

<div class="searchTable"> 
 <label> Search Directory: </lable> 
 <input id="mysearch" type="search" /> 
</div>

<select> 
  <option> History </option> 
  <option> English </option> 
  <option> Economics </option> 
  <option> Computer Science </option> 
  <option> Business </option> 
  <option> Foreign Languages </option> 
  <option> Sociology </option> 
  <option> Nursing </option> 
  <option> Criminal Justice  </option> 
  <option> Management </option> 
  <option> Public Relations </option>
  <option> Communications </option>
</select> 

<select> 
  <option> West Viringia University </option>
  <option> Fairmont State University </option>
  <option> University of Charleston </option>
  <option> Glenville State College </option>
    <option> Shepherd University </option>
    <option> Wheeling Jesuit University </option>
    <option> Marshall University </option>
    <option> WVU-Parkersburg </option>
    <option> Davis & Elkins College </option>
   <option> Concord University </option>
  <option> Bluefield State College </option>
  <option> Salem International University </option>
  <option> Concord University </option>
   <option> Concord University </option>
   <option> Concord University </option>
   <option> Concord University </option>
</select> 


<table>
<tbody><tr>
    <th>Name</th>
    <th>Address</th>
    <th>Discipline</th>
  </tr>

  <tr>
    <td>Katherine B. Aaslestad</td> 
    <td>West Virginia University</td>
<td>History</td>
  </tr>

  <tr>
    <td>Sarah J. Adams</td>
    <td>University of Charleston</td>
<td>History</td>
  </tr>

  <tr>
    <td>Patrick Albano</td>
    <td>Fairmont State University </td>
<td>History</td>
  </tr>

  <tr>
    <td>Timothy C. Alderman</td>
    <td>WV State University</td>
<td>English</td>
  </tr>

  <tr>
    <td>Cyrus M. Aleseyed</td>
    <td>WV State University</td>
<td>Economics</td>
  </tr>

 <tr>
    <td>Heather R. Allman</td>
    <td>Glenville State College </td>
<td>Computer Science </td>
  </tr>

 <tr>
    <td>Mohamed Alshallah</td>
    <td>Fairmont State University</td>
<td>Business</td>
  </tr>

 <tr>
    <td>Maria Amores</td>
    <td>West Virginia University</td>
<td>Foreign Languages </td>
  </tr>

 <tr>
    <td>Robert M. Anthony</td>
    <td>Shepherd University
</td><td>Sociology</td>
  </tr>
<tr>
    <td>Gary L. Arbogast</td>
    <td>Glenville State College</td>
<td>Economics</td>
</tr>
<tr>
    <td>James R. Ashton</td>
    <td>Wheeling Jesuit University </td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Debra Baker</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
<td>Business</td>
</tr>
<tr>
    <td>J. Robert Baker</td>
    <td>Fairmont State University </td>
<td>English</td>
</tr>
<tr>
    <td>Debra Barker</td>
    <td><span class="caps">WVU</span>-Parkersburg</td>
<td>Nursing</td>
</tr>
<tr>
    <td>Dorman C. Batson</td>
    <td>Glenville State College </td>
<td>Business</td>
</tr>
<tr>
    <td>Amy Otley Beckett</td>
    <td>Glenville State College </td>
<td>Criminal Justice </td>
</tr>
<tr>
    <td>Marybeth Beller</td>
    <td>Marshall University </td>
<td>Political Science  </td>
</tr>
<tr>
    <td>Helen Benigni</td>
    <td>Davis &amp; Elkins College</td>
<td>English</td>
</tr>
<tr>
    <td>Roland W. Bergman</td>
    <td>Shepherd University </td>
<td>Geography</td>
</tr>
<tr>
    <td>Jonathan Berkey</td>
    <td>Concord University</td>
<td>History</td>
</tr>
<tr>
    <td>Sheli Bernstein-Goff</td>
    <td>West Liberty University</td>
<td>Social Work </td>
</tr>
<tr>
    <td>Ingrid Bircann-Barkey</td>
    <td>Fairmont State University</td>
<td>Spanish</td>
</tr>
<tr>
    <td>Michael Blackwell</td>
    <td>West Liberty University </td>
<td>Accounting</td>
</tr>
<tr>
    <td>Les Boggess</td>
    <td>Fairmont State University</td>
<td>Criminal Justice </td>
</tr>
<tr>
    <td>Dhruba J. Bora/td&gt;
    </td><td>Marshall University </td>
<td>Criminal Justice</td>
</tr>
<tr>
    <td>Steve Bourne</td>
    <td>Bluefield State College </td>
<td>Management</td>
</tr>
<tr>
    <td>Daniel Boyd</td>
    <td>WV State University</td>
<td>Communications</td>
</tr>
<tr>
    <td>Susan Braidi</td>
    <td>West Virginia University</td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Pam Braden</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
<td>Nursing</td>
</tr>
<tr>
    <td>Gonzalo Bravo</td>
    <td>West Virginia University</td>
<td>Sport Management </td>
</tr>
<tr>
    <td>Robin Broughton</td>
    <td>WV State University</td>
    <td> </td> 
</tr>
<tr>
    <td>Stephen W. Brown</td>
    <td><span class="caps">WVU</span> Institute of Technology </td>
<td>History</td>
</tr>
<tr>
    <td>Rick E. Bruner</td>
    <td>Shepherd University</td>
<td>Art</td>
</tr>
<tr>
    <td>Maria Cristina Burgueno</td>
    <td>Marshall University</td>
<td>Spanish</td>
</tr>
<tr>
    <td>Jeffrey Byrd</td>
    <td><span class="caps">WVU</span> at Parkersburg</td>
<td>Theatre</td>
</tr>
<tr>
    <td>Kevin Cain</td>
    <td>Glenville State College</td>
<td>Education</td>
</tr>
<tr>
    <td>Richard Cain</td>
    <td>Wheeling Jesuit University</td>
<td>Communications</td>
</tr>
<tr>
    <td>Steven Carelli</td>
    <td>Bethany College </td>
<td>Political Science </td>
</tr>
<tr>
    <td>Marvin H. Carr</td>
    <td>West Virginia Wesleyan College</td>
<td>History</td>
</tr>
<tr>
    <td>Thomas Chadwick</td>
    <td>Davis &amp; Elkins College </td>
<td>Political Science</td>
</tr>
<tr>
    <td>Cynthia Chalupa</td>
    <td>West Virginia University </td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Gregory Chase</td>
    <td>West Liberty University </td>
<td>Economics and Finance</td>
</tr>
<tr>
    <td>Angela Cline</td>
    <td>Glenville State College</td>
<td>Business Administration </td>
</tr>
<tr>
    <td>Darrin Cox</td>
    <td>West Liberty University</td>
<td>History</td>
</tr>
<tr>
    <td>Brian Crawford</td>
    <td>West Liberty University </td>
<td>Geography</td>
</tr>
<tr>
    <td>Geri Crawley-Woods</td>
    <td>Shepherd University</td>
<td>Social Work </td>
</tr>
<tr>
    <td>Stephen Cresswell</td>
    <td>West Virginia Wesleyan College </td>
<td>History</td>
</tr>
<tr>
    <td>Gordon Crews</td>
    <td>Marshall University</td>
<td>Criminal Justice </td>
</tr>
<tr>
    <td>Scott Crichlow</td>
    <td>West Virginia University </td>
<td>Political Science </td>
</tr>
<tr>
    <td>Aaron Crites</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
<td>Political Science, History </td>
</tr>
<tr>
    <td>Karen Culcasi</td>
    <td>West Virginia University</td>
<td>Geography</td>
</tr>
<tr>
    <td>Sandra Czernek</td>
    <td>West Liberty University </td>
<td>History</td>
</tr>
<tr>
    <td>Momodou N. Darboe</td>
    <td>Shepherd University </td>
<td>Sociology</td>
</tr>
<tr>
    <td>S. Dianne Davis</td>
    <td><span class="caps">WVU</span>-Parkersburg</td>
<td>Business</td>
</tr>
<tr>
    <td>Tamra Dearing</td>
    <td>Bridgemont Community &amp; Technical College </td>
<td>Business, Computer Science,
 Entrepreneurship</td>
</tr>
<tr>
    <td>Frank L. DeCaria</td>
    <td>WV Northern Community College </td>
<td>Political Science/History </td>
</tr>
<tr>
    <td>Dominick A. DeFilippis</td>
    <td>Wheeling Jesuit University </td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Lisa DeFrank-Cole</td>
    <td>West Virginia University</td>
<td>Leadership Studies </td>
</tr>
<tr>
    <td>Arthur DeMatteo</td>
    <td>Glenville State College </td>
<td>History</td>
</tr>
<tr>
    <td>Kimberly DeTardo-Bora</td>
    <td>Marshall University </td>
<td>Criminology</td>
</tr>
<tr>
    <td>Amy DeWitt</td>
    <td>Shepherd University </td>
<td>Sociology</td>
</tr>
<tr>
    <td>Sandra Dixon</td>
    <td>West Virginia University</td>
<td>Foreign Languages</td>
</tr>
<tr>
    <td>Christopher L. Dolmetsch</td>
    <td>Marshall University</td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Miriam Roth Douglas</td>
    <td>West Liberty University </td>
<td>Education</td>
</tr>
<tr>
    <td>Carmen M. Durrani</td>
    <td>Concord University</td>
<td>Foreign Languages </td>
</tr>
<tr>
    <td>Marie DuToit </td>
    <td>West Liberty University </td>
<td>Nursing</td>
</tr>
<tr>
    <td>Robert D. Duval</td>
    <td>West Virginia University</td>
<td>Political Science </td>
</tr>
<tr>
    <td>Martha Eborall</td>
    <td>Bluefield State College  </td>
    <td>Environmental Science/Biology </td>
</tr>
<tr>
    <td>Clark Egnor</td>
    <td>Marshall University </td>
    <td><span class="caps">TESOL</span>; Education Administration </td>
</tr>
<tr>
    <td>Nadezhda Esque</td>
    <td>Marshall University </td>
    <td><span class="caps">EFL</span></td>
</tr>
<tr>
    <td>Xiaoli Etienne</td>
    <td>West Virginia University </td>
    <td>Ag and Resource Economics</td>
</tr>
<tr>
    <td>Sonya Evanisko</td>
    <td>Shepherd University  </td>
    <td>Art</td>
</tr>
<tr>
    <td>Joe Evans</td>
    <td>Glenville State College </td>
    <td>Science Education/Physical Science </td>
</tr>
<tr>
    <td>Sergio Falconi</td>
    <td>Fairmont State University  </td>
    <td>Italian</td>
</tr>
<tr>
    <td>Christina Fattore</td>
    <td>West Virginia University </td>
    <td>International Relations</td>
</tr>
<tr>
    <td>Stacy S. Fint</td>
    <td>West Virginia University</td>
    <td><span class="caps">TESOL</span></td>
</tr>
<tr>
    <td>Elizabeth Fones-Wolf</td>
    <td>West Virginia University3 </td>
    <td>History</td>
</tr>
<tr>
    <td>Trevellya (Tee) Ford-Ahmed</td>
    <td>WV State University</td>
    <td>Communication &amp; Media Studies </td>
</tr>
<tr>
    <td>Shirley Fortney</td>
    <td>West Virginia Wesleyan College </td>
    <td>Education</td>
</tr>
<tr>
    <td>Connie Morris Fox</td>
    <td>Bridgemont <span class="caps">CTC</span>  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Carl M. Frasure</td>
    <td>Fairmont State University  </td>
    <td>Political Science </td>
</tr>
<tr>
    <td>Nicholas Freidin</td>
    <td>Marshall University  </td>
    <td>Anthropology</td>
</tr>
<tr>
    <td>James J. Friedberg</td>
    <td>West Virginia University  </td>
    <td>Law</td>
</tr>
<tr>
    <td>Mary Frye</td>
    <td>WV State University </td>
    <td>Foreign Languages </td>
</tr>
<tr>
    <td>Aaron Gale</td>
    <td>West Virginia University </td>
    <td>Religion</td>
</tr>
<tr>
    <td>Pablo Garcia</td>
    <td>West Virginia University  </td>
    <td>Spanish</td>
</tr>
<tr>
    <td>Richard A. Garnett</td>
    <td>Marshall University</td>
    <td>Sociology</td>
</tr>
<tr>
    <td>Patricia Gaston</td>
    <td><span class="caps">WVU</span>-Parkersburg </td>
    <td>English</td>
</tr>
<tr>
    <td>Kathryn G. Arano Gazal</td>
    <td>West Virginia University</td>    
<td>Forestry/Ecology </td>
</tr>
<tr>
    <td>Rico M. Gazal</td>
    <td>Glenville State College</td>
    <td>Forestry/Ecology </td>
</tr>
<tr>
    <td>Saba Gebrehiwot</td>
    <td>Marshall University </td>
    <td>German, African Politics </td>
</tr>
<tr>
    <td>Hannah Geffert</td>
    <td>Shepherd University </td>
    <td>History/Political Science</td>
</tr>
<tr>
    <td>Michael Gherke</td>
    <td>Glenville State College </td>
    <td>History</td>
</tr>
<tr>
    <td>Megan Gibbons</td>
    <td>Glenville State College </td>
    <td>Hispanic Language and Literature</td>
</tr>
<tr>
    <td>Tuncer Gocmen</td>
    <td>Shepherd University</td>
    <td>Economics</td>
</tr>
<tr>
    <td>Pablo Gonzalez</td>
    <td>West Virginia University </td>
    <td>Foreign Language </td>
</tr>
<tr>
    <td>David B. Gordon</td>
    <td>Shepherd University</td>
    <td>History</td>
</tr>
<tr>
    <td>Lindsey Graham</td>
    <td>Davis and Elkins College</td>
    <td>Sociology of Religion </td>
</tr>
<tr>
    <td>Marshall Griffin</td>
    <td><span class="caps">WVU</span>-Parkersburg</td>
    <td>Biology</td>
</tr>
<tr>
    <td>Kelly Grose</td>
    <td>Bridgemont Community College</td>
   <td> </td> 
</tr>
<tr>
    <td>Max Guirguis</td>
    <td>Shepherd University </td>
    <td>Constitutional Law</td>
</tr>
<tr>
    <td>Dan Gurash</td>
    <td>Fairmont State University  </td>
    <td>Sociology/Geography</td>
</tr>
<tr>
    <td>Joe D. Hagan</td>
    <td>West Virginia University</td>
    <td>Political Science </td>
</tr>
<tr>
    <td>Joshua Hagen</td>
    <td>Marshall University</td>
    <td>Geography</td>
</tr>
<tr>
    <td>Frew Hailou</td>
    <td>West Virginia State University</td>
    <td>International Trade &amp; Development </td>
</tr>
<tr>
    <td>Homan Hajiran</td>
    <td>Wheeling Jesuit University</td>
    <td>Economics</td>
</tr>
<tr>
    <td>Shannon Halicki</td>
    <td>West Liberty University</td>
    <td>French, Spanish, Linguistics </td>
</tr>
<tr>
    <td>Jonathan Hall</td>
    <td>West Virginia University  </td>
    <td>Ecology</td>
</tr>
<tr>
    <td>Deborah Halsey-Hunter</td>
    <td>Bluefield State College </td>
    <td>Technology/Business Communications</td>
</tr>
<tr>
    <td>Jack L. Hammersmith</td>
    <td>West Virginia University </td>
    <td>History</td>
</tr>
<tr>
    <td>Amy A. Garzon Hampton</td>
    <td>Shepherd University  </td>
    <td>Social Work </td>
</tr>
<tr>
    <td>Wes Harrison</td>
    <td>Ohio Valley College </td>
    <td>History/Political Science </td>
</tr>
<tr>
    <td>Clifford Hawley</td>
    <td>West Virginia University  </td>
    <td>Economics</td>
</tr>
<tr>
    <td>Dwight Heaster</td>
    <td>Glenville State College  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Anders Henriksson</td>
    <td>Shepherd University  </td>
    <td>History</td>
</tr>
<tr>
    <td>Susan Herrick</td>
    <td>West Liberty University </td>
    <td>Sociology</td>
</tr>
<tr>
    <td>John Hicks</td>
    <td>Alderson-Broaddus University  </td>
    <td>History/Political Science</td>
</tr>
<tr>
    <td>Ellessa High</td>
    <td>West Virginia University </td>
    <td>English</td>
</tr>
<tr>
    <td>Geneva K. Hines</td>
    <td>Fairmont State University  </td>
    <td><span class="caps">ESL</span>/Advising</td>
</tr>
<tr>
    <td>Erin Hippolyte</td>
    <td>Fairmont State University  </td>
    <td>French</td>
</tr>
<tr>
    <td>Dominique Hoche</td>
    <td>West Liberty University  </td>
    <td>English</td>
</tr>
<tr>
    <td>Daniel Holbrook</td>
    <td>Marshall University  </td>
    <td>History </td>
</tr>
<tr>
    <td>Jeff Holland</td>
    <td><span class="caps">WVU</span>-Parkersburg  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Aart Holtslag</td>
    <td>Shepherd University </td>
    <td>International Relations</td>
</tr>
<tr>
    <td>Gerald Hough</td>
    <td>New River Community &amp; Technical College  </td>
    <td>Business</td>
</tr>
<tr>
    <td>Sally Howard</td>
    <td>Concord University  </td>
    <td>Political Science </td>
</tr>
<tr>
    <td>Chiquita Howard-Bostic</td>
    <td>Shepherd University  </td>
    <td>Sociology</td>
</tr>
<tr>
    <td>Debra Hull</td>
    <td>Wheeling Jesuit University  </td>
    <td>Psychology </td>
</tr>
<tr>
    <td>Geoff Hunter</td>
    <td>Bluefield State College  </td>
    <td>Management</td>
</tr>
<tr>
    <td>Susan Hunter</td>
    <td>West Virginia University </td>
    <td>Political Science</td>
</tr>
</tbody></table>

我看过几个选项，这些选项只是按升序或降序对表格进行排序，但我需要能够按特定选项进行搜索和排序。如 Codepen 中所示。

我知道我可以在使用 ng-repeat 加载表格时使用 Angular ，但不知道如何使用静态表格数据进行加载。所以使用 angular 可能不是一个好的解决方案。

我的问题是，什么可能是一个好的解决方案，它以与 Angular 隐藏和显示不属于搜索条件的 div 相同的方式工作。

Answer 1

如果你想对整个表使用 Angular ，那么将从 ajax 请求接收的 html 解析为适合 Angular 数据绑定(bind)的对象数组以及许多可用的 Angular 表指令是相当简单的

  var cellProperties = ['name', 'address', 'discipline']

  $http.get('table.html').success(function(data) {
    /* using jQuery for quick demo, easy enough to convert if needed*/
    var $tableRows = $(data).find('tr');
    $scope.tableData = $tableRows.map(function(row) {
      var row = {};
      $(this).children().each(function(cellIndex) {
        row[cellProperties[cellIndex]] = $(this).text()
      });
      return row
    }).get();

  });

// returns    
[{
    "name": "Katherine B. Aaslestad",
    "address": "West Virginia University",
    "discipline": "History"
  },
  ....]

我没有时间解析标题行，但很容易调整它来完成它。

这在使用 dom 解析器库的大多数服务器语言中也相当简单

DEMO