Onclick in td - access to the following cells

Question

I use a table to display elements, the onclick event on cell [0] should output (warn) data from cell [1] and cell [2].

I am not sure with which approach I could access them.

Here is my code so far http://jsfiddle.net/5uua7eyx/3/

Maybe there is a way to use my variable input

HTML

<table id="items">
    <tr>
        <td onclick="ClickPic(this)">Picture0</td>
        <td>Name0</td>
        <td>Price0</td>
    </tr>

        <tr>
        <td onclick="ClickPic(this)">Picture1</td>
        <td>Name1</td>
        <td>Price1</td>
    </tr>         
</table>

Js

function ClickPic(e) {
    "use strict";
    var input = e.target;
    alert("Clicked!");
}

thank

Answer 1

You pass thisthat represents the element, not the event object.

All you have to do is use the parameter to get sibling .cellsfrom .parentNode, and then use elem.cellIndexto determine the following indices:

function ClickPic(elem) {
    "use strict";
    var cells = elem.parentNode.cells;
    var currIdx = elem.cellIndex;
    alert(cells[currIdx + 1].textContent + " " + cells[currIdx + 2].textContent);
}

<table id="items">
    <tr>
        <td onclick="ClickPic(this)">Picture0</td>
        <td>Name0</td>
        <td>Price0</td>
    </tr>

        <tr>
        <td onclick="ClickPic(this)">Picture1</td>
        <td>Name1</td>
        <td>Price1</td>
    </tr>         
</table>
x

Run codeHide result

, 1 2, .

    alert(cells[1].textContent + " " + cells[2].textContent);

Answer 2

js- -

<script type="text/javascript">
                function ClickPic(e) {
                var s = '';
                $(e).siblings().each(function() {
                s = s + ',' + $(this).text()

});

                alert(s);

}