1

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

我试过定义这样的东西： onchange="myFunction()" 其中 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 ]);
            });
        }
    });
});
4

1 回答 1

0

试试下面的代码。添加评论以解释为什么要做的事情（演示）：

$(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
        }
    });
});
于 2014-03-31T22:27:58.477 回答