jQuery - Parser specific table by filter(), map() function

之前在parser網頁內的特定table時,總是撰寫了一堆code,先針對table,再針對tr的部分,再

來是td的欄位,如此一來需撰寫兩層迴圈來跑。而現在雖然可以透過map function,不過如果

要先找到特定table的話,可以先使用filter function來找到這個table的object。

下面有一個例子如下:
  1. <table border=1 width="200">
  2. <tr data="1-1">
  3. <td>1</td>
  4. <td>2</td>
  5. <td>
  6. <table border=1 width="300">
  7. <tr data="1-1-1">
  8. <td>13</td>
  9. <td>14</td>
  10. <td>15</td>
  11. </tr>
  12. <tr data="1-1-2">
  13. <td>16</td>
  14. <td>17</td>
  15. <td>18</td>
  16. </tr>
  17. </table>
  18. </td>
  19. </tr>
  20. <tr data="1-2">
  21. <td>4</td>
  22. <td>5</td>
  23. <td>6</td>
  24. </tr>
  25. </table>

如果我們要針對table內的table擷取其內td的資料,此時我們可以透過先針對body內所有的

table做filter,並且針對filter做一些過濾的設定,如那個table的width = 300,因此針對此一特

性,當找到該table時,回傳該table的object。

  1. var tdtext = new Array();
  2. var selectedobj = $('table').filter(function(){
  3. if($(this).attr('width') == 300){
  4. return $(this);
  5. }
  6. });
  7. var tableData = selectedobj.map(function(i, e){
  8. tdtext = new Array();
  9.     $(e).find('td').each(function(){
  10.     tdtext.push($(this).text());
  11.     });
  12.     return tdtext;
  13. }).get();
  14. console.log(tableData);
當取得了該table的object之後,就可以使用map function與find來取出其內td所有的值!最後

得到的結果如下:

  1. ["13", "14", "15", "16", "17", "18"]

留言