如何使用JQuery从GRID获取值?

时间:2014-07-17 01:46:21

标签: javascript jquery

只想问你是否可以帮我解决问题,

我的表单中有一个使用JQuery创建的网格,我想获取用户在该网格上输入的值并将其保存到我的数据库中。

流程就是这样,

首先,他们会选择不。网站的数量(单元格的数量为阴影),然后他们将点击他们想要的正确单元格。然后我的问题开始了,我如何获得他们输入的值然后保存它。

这是我的代码的工作演示:

http://jsfiddle.net/reymartinaruta/qnm96/

var CMAP = function() {

    // animation
    var blink = function(id)
    {
        $(id).animate({opacity: 0.2}, 300).delay(400)
                .animate({opacity: 1}, 300,
                function()
                {
                    blink();
                }
        );
    };

    return {
        //create map function to initiate the module
        initCreateMAP: function()
        {
            var html = '<table>';
            for (i = 0; i < 15; i++)
            {
                html += "<tr>";
                for (j = 0; j < 15; j++)
                {
                    html += '<td><div id="p' + ((i * 15) + j)  + '" class="mappoint" style="width:20px; height:20px;"></div></td>';
                }
                html += "</tr>";
            }

            html += "</table>";            
            $('#layout').html(html);

        },

        // main function to initiate        
        initCMAP: function()
        {            
            var Point = new Array();

            $('#select5').change(function(){
                Point.length =  0;
                $(".mappoint-change").each(function () {
                        $(this).removeClass('mappoint-change');
                        $(this).html('');
                });

                for(i=0; i < parseInt($('#select5').val()); i++) Point.push(i);

            });

              $('.mappoint').click(function() {

                  var text = $(this).text();

                  if(text != '')
                  {
                      Point.unshift(parseInt(text));
                      $(this).html('');
                      $(this).removeClass('mappoint-change');
                  }
                  else
                  {
                        Point.sort(function(a,b){
                            return a-b;
                        });

                        if(Point.length == 0) return false;

                        for(var i in Point)
                        {
                              $(this).addClass('mappoint-change');
                              blink(this);
                              $(this).html(Point[i]);
                              Point.shift();
                              break;
                        }
                  }
              });              

           var data = new Array();
           //var data = [ "p0", "p1", "p2", "p33", "p49", "p65", "p127", "p140", "p141", "p142"];

           $('#submit').click(function() {
//                $.post('cmap.action.php', $('#requestfrm').serialize(),
//                        function(data) {
//                            $('#rq-info').html(data);
//                        }
//                );

//                for(i=0; i<data.length; i++)
//                {
//                    $('#' + data[i]).addClass('mappoint-change');
//                    $('#' + data[i]).html(i);
//                }

                $(".mappoint-change").each(function () {                    
                     data.push(this.id);
                });

            });

            $('#reset-cmap').click(function() {
                if(confirm("Do you want to reset your map?"))
                {    
                    $(".mappoint-change").each(function () {
                        Point.unshift(parseInt($(this).text()));
                        $(this).removeClass('mappoint-change');
                        $(this).html('');
                    });
                }
            });
        }       
    };

}();

非常感谢。

1 个答案:

答案 0 :(得分:1)

试试这段代码。它读取ID并将其转换为坐标X和Y

演示:jsFiddle

        var pointOrder=$(this).attr("id").replace("p","");
        pointOrder=parseInt(pointOrder);

        var corX=parseInt(pointOrder/15);
        var corY=pointOrder%15;