jQuery - create hashmap to search table data

一般來說,我們可以建構JavaScript的Hash Map關係來search一個table下的標籤的內容值,

如此一來我們就不用考慮位置的問題,而馬上就可以因應我們自訂的Hash Key找到我們要

的標籤內容。

如下面有兩個簡易的表格:
  1. <div id="filterdata">
  2. <table border="1">
  3. <tbody>
  4. <tr>
  5. <td>Name</td>
  6. <td>Ben</td>
  7. </tr>
  8. <tr>
  9. <td>Gender</td>
  10. <td></td>
  11. </tr>
  12. <tr>
  13. <td>Job</td>
  14. <td>廚師</td>
  15. </tr>
  16. </tbody></table>
  17. <table border="1">
  18. <tbody>
  19. <tr>
  20. <td>Name</td>
  21. <td>Mark</td>
  22. </tr>
  23. <tr>
  24. <td>Gender</td>
  25. <td></td>
  26. </tr>
  27. <tr>
  28. <td>Job</td>
  29. <td>醫生</td>
  30. </tr>
  31. </tbody></table>
  32. </div>

假設我們要取得Name, Job內的資料,我們在撰寫code時,除了寫code去parse table之外,

當code parse到tag時,我們可以利用下面自訂的Hash Map來立刻得到回應。
  1. var hashmap = {'Name' : true, 'Job' : true};
  2. $(document).ready(function() {
  3. $("#filterdata").find("table").each(function(){
  4. rows = $(this).find("tr").get();
  5. $.each(rows, function(rowindex, row){
  6. cols = row.cells;
  7. $.each(cols, function(colindex, col){
  8. if(hashmap[$(this).text()]){
  9. alert($(this).next().text());
  10. }
  11. });
  12. });
  13. });
  14. });

上述的jQuery code為簡易的parse table,我們可以利用if(hashmap[$(this).text()])來決定是否要

取用這個tag下的值,以此來快速判斷。這個table的欄位有點少,但欄位很多的table就可以

見到Hash的方便之處。

另外您也可以使用in operator來判斷該index(上述為Key)是否在array內是有意義的

if ($(this).text() in hashmap){}

留言