Question

求大神用js或jQuery实现输入框内容与表格背景色同步

求实现如下功能:图1:页面打开后,上面的表格里有6个数字,默认是有背景色的黄色按钮 输入框里面只能输入数字,(范围01-33),个位数前面自动加0,如: 01 02 03 数字输入后自动处理数字格式,按由小至大排列,数字之间用空格分开 以后如果再次添加其他数字后也自动格式化 如:首次输入15 02 33后排列成:02 15 33 再次在02 15 33后面接着输入 20 01 自动排列成: 01 02 15 20 33 页面打开后下面表格中的数字会与上面表格同步改变背景色,默认是都有背景色的 但与上面表格不同的是颜色的取值范围:01-11红色\12-22绿色\23-33蓝色图2:当鼠标点击某个数字后,上面表格去掉该数字背景色,再次点击则还原背景色 当鼠标点击某个数字后,输入框里会同步显示该数字 当鼠标点击某个数字后,下面表格去掉该数字背景色如图2:当鼠标点击上面表格中11 33后11 33的背景色去掉 输入框里显示11 33 下面表格中11 33的背景色去掉 当输入框里输入11 33后,上下两个表格中的11 33背景色去掉 输入框右边的"清空"按钮点击后清空内容,页面还原成图1的样子备注:上下两个表格中的数字背景色是同步改变的 输入框默认是空的,可以多次在里面添加修改数字 输入数字之后自动格式化排列数字.(如果无法实现就在旁边加个按钮,点击后实现排序)
源文件连接





Answer 1

下面js放进你原来index文件就行了
<script src='jquery-2.1.4.min.js'></script>
    <script>
        $(function(){
            //输入框的值改变**********************************************
            $('#ipt').change(function(){
                var arr = getIptArr();
                
                //上面的背景色消失
                $('.tab1 tr td').each(function(){
                      wipeColor(arr, $(this), true);
                })

                //下面的背景颜色消失
                $('.tab2 tr td').each(function(){
                    wipeColor(arr, $(this), false);
                })
                
                var nums = arr.map(function(val){
                    return val<10 ? '0'+val : val;
                })
                $(this).val(nums.join(' '));
            })
             //获取输入框值的数组
            function getIptArr(){
                var arr = $.trim($('#ipt').val()).split(' ');
                arr = str2arr(arr);         //字符串元素转数字
                arr = arr.sort(sortNumber); //升序

                return arr;
            }

            //数组元素:  字符串 转 数字
            function str2arr(arr){
                var len = arr.length;
                var newArr = [];
                for(var i=0; i<len; i++)
                {
                  var num = $.trim(arr[i]);
                  if(num != ''){
                      newArr.push(parseInt(num));
                  }
                }

                return newArr;
            }
            //数组排序函数的参数
            function sortNumber(a,b){
              return a-b;     //升序
            }

            //判断单元格td的背景色是否消失
            function wipeColor(arr, obj, ismenu){
                  var num = parseInt(obj.text());
                  var flag = arr.indexOf(num);        //不等于-1的表示背景色要消失
                  
                  var className = 'bg';               //单元格class
                  if(!ismenu)
                  {   //页面部分单元格01-11红色\12-22绿色\23-33蓝色图
                      className = getClass(num);
                  }
                  flag!=-1 ? obj.removeClass(className) : obj.addClass(className);
            }
            //返回不同数字对应的class
            function getClass(num){
                var className = '';
                if(num>=1 && num<=11)
                  className = 'bg1'
                else if(num>=12 && num<=22)
                  className = 'bg2'
                else if(num>=23 && num<=33)
                  className = 'bg3'

                return className;
            }

            //菜单部分单元格点击**********************************************
            $('.tab1 tr td').click(function(){
                  var flag = $(this).hasClass('bg');
                  var num = $(this).text();
                  var className = getClass(parseInt(num));
                  if(flag){
                      $(this).removeClass('bg');
                      //页面部分单元格
                      synchCellColor(2, num, 'remove', className);
                      //同步输入框
                      synchIpt(parseInt(num), 'add');

                  }
                  else{
                      $(this).addClass('bg');
                      //页面部分单元格
                      synchCellColor(2, num, 'add', className);
                      //同步输入框
                      synchIpt(parseInt(num), 'minus');
                  }

            })
            //页面部分单元格点击**********************************************
            $('.tab2 tr td').click(function(){
                  var flag = true;
                  var num = $(this).text();
                  var className = getClass(parseInt(num));

                  if(!$(this).hasClass('bg1') && !$(this).hasClass('bg2') && !$(this).hasClass('bg3')){
                      flag = false;
                  }
                  
                  if(flag){
                      //页面部分单元格
                      //$(this).addClass(className);
                      synchCellColor(2, num, 'remove', className);    //有些数字有两个的
                      //菜单部分单元格
                      synchCellColor(1, num, 'remove', 'bg');
                      //同步输入框
                      synchIpt(parseInt(num), 'add');

                  }
                  else{
                      //页面部分单元格
                      synchCellColor(2, num, 'add', className);
                      //菜单部分单元格
                      synchCellColor(1, num, 'add', 'bg');
                      //同步输入框
                      synchIpt(parseInt(num), 'minus');
                  }

            })
            //页面部分单元格同步颜色
            function synchCellColor(classNum, num, flag, className){
                $('.tab'+classNum+' tr td').each(function(){
                    var val = parseInt($(this).text());
                    if(parseInt(num) == val){
                        if(flag == 'add')
                            $(this).addClass(className);
                        else if(flag == 'remove')
                            $(this).removeClass(className);

                        return false;
                    } 
                })
            }
            //同步输入框数字
            function synchIpt(num, flag){
                var arr = getIptArr();
                
                if(flag == 'add'){        //加上
                    arr[arr.length] = num;
                    arr = arr.sort(sortNumber);
                }
                else if(flag=='minus'){   //去除
                    var index = arr.indexOf(num);
                    arr.splice(index, 1);
                }
                var nums = arr.map(function(val){
                        return val<10 ? '0'+val : val;
                    })

                $('#ipt').val(nums.join(' '));
            }
            

        })

    </script>