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
}
});
});