jQuery - create hashmap to search table data

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

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

的標籤內容。

如下面有兩個簡易的表格:

<div id="filterdata">
<table border="1">
 <tbody>
<tr>
     <td>Name</td>
        <td>Ben</td>
    </tr>
<tr>
     <td>Gender</td>
        <td>男</td>
    </tr>
<tr>
     <td>Job</td>
        <td>廚師</td>
    </tr>
</tbody></table>
<table border="1">
 <tbody>
<tr>
     <td>Name</td>
        <td>Mark</td>
    </tr>
<tr>
     <td>Gender</td>
        <td>男</td>
    </tr>
<tr>
     <td>Job</td>
        <td>醫生</td>
    </tr>
</tbody></table>
</div>

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

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

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

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

見到Hash的方便之處。

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

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

留言