jquery，从tr获取画布上下文

从tr开始引用时，如何获取td中画布的上下文？示例代码：jquery，从tr获取画布上下文

<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秒发生一次......但它不适用于该问题，只是它的重要性。

来源

2017-04-15 gunslingor

取决于示例HTML的代表性。其他行的构造是否相同？如果不是，可能会有什么变化？ –

有三种类型的行，pool_row是第一种类型......其他两种类型将有不同的代码，但行几乎相同。只有pool_row类型会受到这个特定选择器的影响。将会有多个池行，并且td的数量会随着设计的进展而变化，所以我想按名称来做......会让jquery变得更小。所有游泳池行将被构造相同，并具有不同的值。 – gunslingor

解决了由于这个职位，我经常和更复杂的事宜中打交道时忘记这一点：jQuery equivalent of getting the context of a Canvas

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

来源

2017-04-15 02:14:05 gunslingor

的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.

这些只是例子。可以做更多的选择。例如，如果有多于一个这种类型的表，您可能希望将选择限制在其中一个表中，在这种情况下，事情会变得更加复杂，但并不显着。

来源

2017-04-15 02:25:38

名称也被设计用于重复使用，但如果您坚持使用类别，则更改它不会影响css ...它的id字段旨在是唯一的。 – gunslingor

你*可以*有重复的名字，但是与使用类相比，你会让生活变得很难。 –

除了在表单中，通常不会使用name属性。 –

jquery，从tr获取画布上下文

回答

相关问题