tablesorter的单元格计算

Question

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

我试过定义类似这样的东西：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 ]); 
      }); 
     } 
    }); 
}); 

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