테이블 편집기에 대한 셀 계산

Question

여러 셀의 값을 계산하고 싶습니다. 테이블의 다른 부분에서 슬라이더 막대를 움직이면 업데이트됩니다. 현재 정의 된 값을 저장하고 있지만 업데이트해야합니다.

myFunction이 변수를 다시 정의하지만 작동하지 않는 onchange = "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 
     } 
    }); 
});