Question

我想计算多个单元格中的值，这些单元格会在表格的不同部分移动滑块时更新。我目前正在定义它之后存储它，但它需要更新。

我尝试过这样的定义：onchange =＆＃34; myFunction（）＆＃34; myFunction将重新定义变量，但这不起作用。

我认为解决方案是在代码的initialized: function (table)区域下插入一些内容以进行动态更新（我不知道该怎么做），但是不知怎的，它需要引用另一个单元格已被定义为使用此更新值，要求先前初始化....

我会停止漫步。一些帮助将不胜感激。

这是我的代码：

$(function () {
    DataArray = [];
    tempor = [];
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);
    tempor.push(1);
    tempor.push(    '<input name="a" type="range"  min="0" max="5" value="0" onchange="ChangeFunction()"/>'
               +    '<br>'
               +    '<output name="OutputValue">0</output>');
    var xcomp = document.getElementById("OutputValue");
    tempor.push(3);
    tempor.push(4*xcomp);
    tempor.push(5);

    for (var i = 0; i < 4; i++) {
        DataArray.push(tempor);
    }
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);

    $('#namehere').tablesorter({debug: true,
        theme: 'blue',
        widgetOptions: {
            build_type: 'array',
            build_source: DataArray,
            build_headers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Header classes to apply to cells
                text: [], // Header cell text
                widths: [] // set header cell widths
            },
            build_footers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Footer classes to apply to cells
                text: [] // Footer cell text
            }
        },
        initialized: function (table) {
            $('#namehere').on('change', 'input', function () {
                var $input = $(this),
                    // don't allow resort, it makes it difficult to use the slider
                    resort = false;
                $input.parent().find('output').html($input.val());
                $(table).trigger('updateCell', [ $input.closest('td'), resort ]);
            });
        }
    });
});

Answer 1

尝试以下代码。添加评论以解释为何完成的事情（demo）：

$(function () {
    DataArray = [];
    tempor = [];
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);
    tempor.push(1);
    tempor.push(    '<input name="a" type="range"  min="0" max="5" value="0" onchange="ChangeFunction()"/>'
               +    '<br>'
               +    '<output name="OutputValue">0</output>');
    tempor.push(3);
    tempor.push(0);
    tempor.push(5);

    for (var i = 0; i < 4; i++) {
        DataArray.push(tempor);
    }
    DataArray.push(['test_01', 'test_02', 'test_03', 'test_04', 'test_05']);

    $('#namehere').tablesorter({debug: true,
        theme: 'blue',
        widgetOptions: {
            build_type: 'array',
            build_source: DataArray,
            build_headers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Header classes to apply to cells
                text: [], // Header cell text
                widths: [] // set header cell widths
            },
            build_footers: {
                rows: 1, // Number of header rows from the csv
                classes: [], // Footer classes to apply to cells
                text: [] // Footer cell text
            }
        },
        initialized: function (table) {
            $('#namehere').on('change', 'input', function () {
                var $input = $(this),
                    $td = $input.closest('td'),
                    // don't allow resort, it makes it difficult to use the slider
                    resort = false;
                $td
                    .find('output').html($input.val())
                    .end() // back to $td
                    .next().next() // to test_04 column
                    .html( parseFloat( $input.val() ) * 4 );
                // update the entire table since multiple cells have changed
                $(table).trigger('update', [ resort ])
            }).change(); // trigger change event to set initial values
        }
    });
});

tablesorter的单元格计算

1 个答案: