cell computation for tablesorter

Question

I would like to compute the values in a number of cells, that get updated as one moves a slider bar in a different part of the table. I currently am storing the value after it is defined, but it needs to be updated.

I've tried defining something like this: onchange="myFunction()" where myFunction would redefine the variable, but that did not work.

I think that the solution is to insert something under the initialized: function (table) area of the code for a dynamic update (which I'm not sure how to do), but then somehow it needs to reference another cell which has been defined to use this updated value, requiring it to be initialized previously....

I'll stop rambling. Some help would be appreciated.

Here is my code:

$(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

Try the following code. Comments added to explain why things where done (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
        }
    });
});