表格外的滑块可动态更新表格内容

Question

我有一个表，我正在使用jquery进行排序，并希望在表格上方添加一些滑块，我可以使用这些滑块来调整表格的单元格值。

我有以下代码（我可以连续使用一些代码），它可以创建一些滑块并更新它们的输出。但是，我将其插入到jquery表的代码中，此代码似乎不会被读取。

代码：

$(function() {
        $( "#SliderBar1" ).slider({
            value:0,
            min: 0,
            max: 5,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount1" ).val( ui.value );
            }
        });
        $( "#setvalue" ).click(function(){
            $( "#amount1" ).val( 3 );
            $( "#SliderBar1" ).slider("option", "value", 3);
        });
        $( "#amount1" ).val($( "#SliderBar1" ).slider( "value" ) );
    });

我也有这个将使用HTML5滑块（如果可能的话，首选），但如果我有多个这样的滑块，它似乎不会保持输出分开，只会更新其中一个输出。

Bar: <input name="SliderBarA" type="range"  min="0" max="5" value="0" onchange="showValue(this.value)"/>
        <span id="SliderBarA">0</span>
        <script type="text/javascript">
            function showValue(newValue){
                document.getElementById("SliderBarA").innerHTML = newValue;
            };
        </script>

在任何一种情况下，都需要将滑块的值拉入表中，并在更新时更新表中的计算值。

为了论证，让我说我在{1,2,3,4,5}表中有一列我希望乘以其中一个滑块的值，然后添加值其他滑块到该值：

column value = table value * sliderbar1 value + sliderbar2 value

我的桌子上有以下内容：

$(function () {




    DataArray = [];
    ObjectsArray = ['Object_01', 'Object_02', 'Object_03', 'Object_04', 'Object_05'];
    DataArray.push(['Col_00', 'Col_01', 'Col_02', 'Col_03', 'Col_04', 'Col_05']);
    Col3Array = [1, 2, 3, 4, 5];
    Col4Array = [6, 7, 8, 9, 10];
    Col5Array = [11, 12, 13, 14, 15];

    for (var i = 0; i < ObjectsArray.length; i++) {
        tempor = [];
        tempor.push(i)
        tempor.push(ObjectsArray[i]);
        tempor.push(    '<input name="a" type="range"  min="0" max="5" value="0"/>'
                    +   '<br>Value: '
                    +   '<output>0</output>');
        tempor.push((Col3Array[i]*.9).toString() + '<br>(' + (Col3Array[i]).toString() + ')');
        tempor.push((Col4Array[i]*.9).toString() + '<br>(' + (Col4Array[i]).toString() + ')');
        tempor.push((Col5Array[i]));
        DataArray.push(tempor);
    }
    DataArray.push(['Col_00', 'Col_01', 'Col_02', 'Col_03', 'Col_04', 'Col_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
                    .prev().prev()  //  to Col_00 column
                    var $row = $td.prev().prev().html();
                $td
                    .find('output').html($input.val())
                    .end() // back to $td
                    .next() // to Col_03 column
                    .html((Math.round( Col3Array[$row]*(parseFloat($input.val())*.2) *100)/100).toString()
                        + '<br>(' + Col3Array[$row].toString() + ')');
                $td
                    .find('output').html($input.val())
                    .end()
                    .next().next() // to Col_04 column
                    .html((Math.round( Col4Array[$row]*(parseFloat($input.val())*.2) *100)/100).toString()
                        + '<br>(' + Col4Array[$row].toString() + ')');
                // update the entire table since multiple cells have changed
                $(table).trigger('update', [ resort ])
            }).change(); // trigger change event to set initial values
        }
    });
});

我想在表格上方放置2个滑块，创建并将其值调用到计算单元格中。

提前感谢您的帮助。