Onclick在动态表格单元格范围中更改或插入文本

Question

I have a dynamic table, with multiple tr and td and buttons in it. I want to insert a counting number infront of td content, every time the (up)-button is clicked. Something like this: [3 x ABC].

My demo does not work, but my current version; what ever button I click on, the number appears and increase in all of the rows at once. I want the buttons to function in respektiv rows. How to manage that in jquery? Please.

$(function(){
    var count=1;
    $('.up').click(function(){
    count++
    $('.times').text(count+' x ');
})
});

DEMO

Answer 1

This line is the problem:

$('.times').text(count+' x ');

It selects every occurrance of .times and sets a text to all of them.

In your case, you want the one on the same row. So from the clicked element ( this ), go up and find the closest tr in the chain of ancestors. Then, within that row, find a .times again to set the text in:

$(this).closest('tr').find('.times').text(count+' x ');

Updated fiddle

If you want to have a counter per row too, you could store the counter information in a data attribute of the element. Another, arguably better, solution is to create closures that hold the variable. That latter solution I've implemented in...

Yet another update of the fiddle