I have a table that has 5 td tags in it.
<tr id="rows">
<td x="111" y="1" col="1" row="1">
<div class="marge-col"></div>
</td>
<td x="1" y="1" col="2" row="1">
<div class="marge-col"></div>
</td>
<td x="1" y="1" col="3" row="1">
<div class="marge-col"></div>
</td>
<td x="1" y="1" col="4" row="1">
<div class="marge-col"></div>
</td>
<td x="1" y="1" col="5" row="1">
<div class="marge-col"></div>
</td>
</tr>
I want a click on the div.marge-col
td tag(parent of clicked div) to increase attr('x')
one value(for example, when I click on first.merge-col
parent tag(td) increase x attribute and change value to 2)
I cannot do it.
This is my jquery code, but it's not working.
When I click on first div.marge-col
console shows me **11**
!!! Why??? (1+1=11???)
$(document).on('click','#rows td .marge-col',function(){
console.log('col');
$(this).parent().attr('x',$(this).parent().attr('x')+1);
console.log($(this).parent().attr('x'));
});