单击动态表格单元格范围内的更新atrribute值

时间:2016-04-12 18:18:18

标签: javascript jquery html

如何使Up按钮更新属性值?当我将计数fx增加到5然后使用向下按钮将其减少到2,然后再次增加它时,它不会从当前值的值增加,因为它是2但是从5继续。我只是不知道如何单击向下按钮后更新它。 DEMO

$(function() {
    var plus = $('.up');
    var minus = $('.down');
    $(plus).each(function(index, element) {
        var count= $(element).closest('tr').find('.times').attr('data-myval');
        $(element).click(function() {
            count++;
            $(element).closest('tr').find('.times').attr('data-myval', count);
            $(element).closest('tr').find('.times').text(count +' x');
        });
    });
    $(minus).each(function(index, element) {
        $(element).click(function() {
            var count= $(element).closest('tr')
             .find('.times').attr('data-    myval');
            count--;
            parseInt($(element).closest('tr')
            .find('.times').attr('data-myval',count))
            $(element).closest('tr').find('.times').text(count +' x');
            if (count<2) {  
                $(element).closest('tr').find('.times').text('');
            }
            if (count < 1) {
                $(this).parents('tr').remove();
            }
        });
    });
});

4 个答案:

答案 0 :(得分:2)

请在count按钮的click内设置up

$(function() {
var plus = $('.up');
var minus = $('.down');
$(plus).each(function(index, element) {
    $(element).click(function() {
        var count= $(element).closest('tr').find('.times').attr('data-myval');
        count++;
        $(element).closest('tr').find('.times').attr('data-myval', count);
        $(element).closest('tr').find('.times').text(count +' x');
    });
});
$(minus).each(function(index, element) {
    $(element).click(function() {
        var count= $(element).closest('tr')
         .find('.times').attr('data-    myval');
        count--;
        parseInt($(element).closest('tr')
        .find('.times').attr('data-myval',count))
        $(element).closest('tr').find('.times').text(count +' x');
        if (count<2) {  
            $(element).closest('tr').find('.times').text('');
        }
        if (count < 1) {
            $(this).parents('tr').remove();
        }
    });
});
});

我希望有帮助:D

答案 1 :(得分:1)

我猜你在onclick函数之外设置了计数

var count= $(element).closest('tr').find('.times').attr('data-myval');

因此,计数可以保持按下上一次按下时设置的先前值。

答案 2 :(得分:1)

您只需要为每个.each btns执行plus/minus功能,只需直接在其上调用.click函数,就可以这样工作 -

JS-

$(function() {
    var plus = $('.up');
    var minus = $('.down'); 
        $(plus).click(function() {
    var count= $(this).closest('tr').find('.times').attr('data-myval');
            count++;
//          console.log(count);
            $(this).closest('tr').find('.times').attr('data-myval', count);
            $(this).closest('tr').find('.times').text(count +' x');
        });
    $(minus).click(function() {
            var count= $(this).closest('tr').find('.times').attr('data-myval');
            count--;
            parseInt($(this).closest('tr').find('.times').attr('data-myval',count))
            $(this).closest('tr').find('.times').text(count +' x');
            if (count<2) {  
                $(this).closest('tr').find('.times').text('');
            }
            if (count < 1) {
                $(this).parents('tr').remove();
            }
    });
});

这是更新后的链接 -

https://jsfiddle.net/j9vnbcf0/14/

答案 3 :(得分:1)

首先在count变量中获取值然后递增我更新你的jsfiddle,我希望它对你有帮助

var count = $(element).closest('tr').find('.times').attr('data-myval');
        count++;

https://jsfiddle.net/j9vnbcf0/13/