Jquery, Get canvas context from tr

Question

How do I get the context of a canvas in a td when starting reference from tr? Example code:

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

Obviously the real php generated table I'm working with is a lot more complicated. All this also goes in an setInterval function so it occurs every 1 second... but it's not applicable to the question, just the importance of it.

Depends how representative the sample HTML is. Are other rows identically constructed? If not, what variations might there be? — Roamer-1888, Apr 15 '17 at 01:45
There are three types of rows, pool_row is the first type... there will be different code for the other 2 types but the rows are about the same. Only the pool_row type will be affected by this particular selector. There will be multiple pool rows, and the number of td will vary as the design progresses, so I want to do it by name... will make the jquery smaller too. All pool rows will be identically constructed, with different values. — gunslingor, Apr 15 '17 at 01:49

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

Solved thanks to this post, I often forget about this when dealing with more complicated maters: jQuery equivalent of getting the context of a Canvas

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

edited May 23 '17 at 12:32

Community

1
1

answered Apr 15 '17 at 02:14

gunslingor

1,358
12
34

score 0 · Answer 2 · answered Apr 15 '17 at 02:25

The name attribute shouldn't be used like this.

Instead use classes, which are designed for repeated use within the same document :

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

Now you can select the canvas elements as follows :

$("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.

These are just examples. Many more selections can be made. If, for example, there was more than one table of this type, you might want to constrain the selection to just one of the tables, in which case things would get more complicated, but not significantly.

name is also designed for repeated use, but changing it doesn't affect css if you stick to classes there... its the id field that is intended to be unique. — gunslingor, Apr 15 '17 at 02:28
You *can* have repeated names but you make life real hard for yourself compared to using classes. — Roamer-1888, Apr 15 '17 at 02:33
And the name attribute is typically not used except in forms. — Roamer-1888, Apr 15 '17 at 02:38

Jquery, Get canvas context from tr

2 Answers2