jquery，從tr獲取畫布上下文

Question

從tr開始引用時，如何獲取td中畫布的上下文？示例代碼：

<table> 
    <tr name='pool_row' id='swimming_pool'> 
     <td> 
     </td> 
     <td> 
     </td> 
     <td name='write_graphic'> 
      <canvas name='graphic' class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
     <td name='read_graphic'> 
      <canvas name='graphic' class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
    </tr> 
    <tr name='pool_row' id='hot_tub'> 
     <td> 
     </td> 
     <td> 
     </td> 
     <td name='write_graphic'> 
      <canvas name='graphic' class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
     <td name='read_graphic'> 
      <canvas name='graphic' class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
    </tr> 
</table> 
<script> 
    $("tr[name='pool_row']").each(function(){ 
     //Get Data for all pools from DB 
     //Loop over them, when match is found 
     //by id draw something. 
     var ctx = $(this).find("td[name='write_graphic']").find("canvas").getContext('2d'); 
    }); 
</script> 

顯然，真正的PHP生成的表我的工作是一個複雜得多。所有這些也都在setInterval函數中進行，因此它每隔1秒發生一次......但它不適用於該問題，只是它的重要性。

Answer 1

解決了由於這個職位，我經常和更復雜的事宜中打交道時忘記這一點：jQuery equivalent of getting the context of a Canvas

var ctx = $(this).find("td[name='write_graphic'] ").find("canvas")[0].getContext('2d'); 

Answer 2

的name屬性不應該用這樣的。

而是使用類，其目的是爲在同一個文檔內重複使用：

<table> 
    <tr class='pool_row' id='swimming_pool'> 
     <td> 
     </td> 
     <td> 
     </td> 
     <td class='write_graphic'> 
      <canvas class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
     <td class='read_graphic'> 
      <canvas class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
    </tr> 
    <tr class='pool_row' id='hot_tub'> 
     <td> 
     </td> 
     <td> 
     </td> 
     <td class='write_graphic'> 
      <canvas class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
     <td class='read_graphic'> 
      <canvas class='dataset_graphic' width='200' height='23'></canvas> 
     </td> 
    </tr> 
</table> 

現在您可以選擇畫布內容如下：

$("tr.pool_row canvas") // all pool_row canvases. 

$("tr.pool_row").eq(0).find("canvas") // both canvases in the first pool_row. 

$("tr.pool_row td.write_graphic canvas") // all pool_row write_graphic canvases. 

$("tr.pool_row td.read_graphic canvas") // all pool_row read_graphic canvases. 

這些只是例子。可以做更多的選擇。例如，如果有多於一個這種類型的表，您可能希望將選擇限制在其中一個表中，在這種情況下，事情會變得更加複雜，但並不顯着。