Question

How can i get value in <tr cost="xx.xx"> if i click on some button with id="minus" or id="plus"?

http://jsfiddle.net/YD9uB/3/

Answer 1

You can use the closest() method.

var cost = $("#minus").closest("tr").attr("cost");

However, you really shouldn’t use non standard html attributes. You could use data attributes instead:

<table>
  <tr data-cost="xx.xx">
    <td>
    <input type="submit" id="minus"/>
    </td>
  </tr>
</table>

And then access them with the data() method.

var data = $("#minus").closest("tr").data();
var cost = data.cost;

Update

Here it is inside a click handler:

$(document).ready(function() {
    $(".plus, .minus").click(function() {
        var data = $(this).closest("tr").data();
        var cost = data.cost;
        alert(cost);
    });
});

With the following updated html that doesn’t have duplicate ids:

<form>
    <table>
    <tbody>
        <tr>
            <th></th>
            <th>name</th>
            <th>quantity</th>
            <th>cost</th>
        </tr>
        <tr data-cost="50.00">
            <td></td>
            <td>Some Name A</td>
            <td>
                <img class="minus button" align="LEFT" src="./img/minus.png" alt="-">
                <input type="text" value="20" name="quantity">
                <img class="plus button" align="RIGHT" src="./img/plus.png" alt="+">
            </td>
            <td></td>
        </tr>
        <tr data-cost="80.00">
            <td></td>
            <td>Some Name B</td>
            <td>
                <img class="minus button" align="LEFT" src="./img/minus.png" alt="-">
                <input type="text" value="10" name="quantity">
                <img class="plus button" align="RIGHT" src="./img/plus.png" alt="+">
            </td>
            <td></td>
        </tr>
    </tbody>
    </table>
</form>​
​

Here’s the updated fiddle