Jquery/jqueryMobile接收数据，并将其添加到table中且覆盖掉重复行

1.第一步，引用相关的JS或CSS

引用JqueryMobile.min,js

引用Jquery.js（引用Jquery.WebSocket.js（Socket通信必备）

引用Model.js/apiData.js（这两个是我这边的自定义的，和我这边的服务端通信有关，这两者一定要遵从某些协定/标准/规则，双方有一方不同就无法进行指定的交互）引用其他........等等

2.第二步，在HTML页面中定义Jquery方法实现数据接收

1.首先创建JavaScript标签。

<script type="text/javascript"></script>

2.在JavaScript标签中创建网页加载完成后立马加载相关数据的方法，ready方法（文档即document加载后立马触发该方法），

里面的step是自定义方法。

function step() {
            for (var i = 0; i < steps.length; i++) {
		方法内容xxx;
}
        $(document).ready(function () {
            step();
        });

3.服务器发送的数据一定有一个与之对应的本地JS与其交互，找到该交互JS（这是本地的），

然后找到你需要时用到的接收方法（一般的都是以OnResponse之类的名称开头），

然后在该方法中获取对象（获取不到那还玩个P），该对象就是服务器端发给你的。

4.找到你的table标签，我这里没有使用table，直接使用了tbody，然后给其添加id或者class属性，以便在之后的JS调用（注意：id最好是唯一的，class的话视情况而定）

5.回到JS中，开始进行正式操作：

1）首先要定义一个map，定义在JavaScript标签中

 ///用来去掉重复数据
 var map = {};

2）在响应方法中接受服务器发送的对象并对该对象其进行解析：

3）我这里有个connection方法，意思是当和服务器连接成功，改变某标签的底色，失败时，改变底色。

4）OnOrder方法是我们要处理数据的方法，其详细说明在注释中。

var orderOK= $.order("ws://127.0.0.1:22222/", {
            OnConnected: function () {
                //连接成功
                $("#TD_States_A").css("color", "#black");
                $("#TD_States_A").css("background-color", "#00EC00");
                $("#TD_States_B").text("成功");
                $("#TD_States_B").css("color", "#black");
                $("#TD_States_B").css("background-color", "#00EC00");

            },
            OnOrder: function (r) {
                //存在该行
		//table中存在该行,我们就需要处理，这时候我们需要用到对象R，对象r是服务器依次发送过来的对象，它们都具有ID且唯一的，
		//我们知道了map中存在该行，所有要用each方法是遍历该行，获取其中的某些列
		//即td，并对td进行遍历，i是遍历次数，如果i=0，则走需要处理的第一列，这里用statesDisk方法处理第一列，其余列类推
		
		//注意，你要替换的td要和遍历次数对应上，不然会产生错误的,我这里要替换3个，所以你要写3个switch，当然还有其他方法，
		//依个人爱好,假如你的td需要添加button_Click方法，就按照我下面的写，是没有问题的。


              if (map[r.data.ID] != undefined) {
                    $("#row" + r.data.ID + " .up").each(function (i) {
                        switch (i) {
                            case 0:
                                $(this).text(statesDisk(r.data.OrderStatus));
                                break;
                            case 1:
                                xxx2;
                                break;
                            case 2:
                                xxx3;
                                break;
                        }
                    });
                } else {		
			
		//不存在该行，即map中不存在该对象,我们就要在table中创建该行，那么创建的时候我们要为每一行指定一个独一无二的id
		//我创建的td中都调用了RISK方法，这里的Risk(r.data.d) 意思是将该对象的指定属性进一步处理，
		//比如说对R的d属性进行四舍五入转换等等
		//核心点在 class='UP'这里,这里标明了当前对象（行）那些会产生冲突，这里我们用 class="up"标记了该列可能会改变

                    var tr = "<tr id='row" + r.data.ID+ "'>" +
                        "<td > " + Risk(r.data.D) + "</td>" +
                        "<td class='up'> " + StatesDisk(r.data.OrderStatus) + "</td>" +
                        "<td > " + r.data.Price + "</td>" +
                        "<td > " + r.data.Volume + "</td>" +
                        "<td  class='up'> " + r.data.abc+ "/" + r.data.def + "</td>" +
                        "<td  class='up'> " + r.data.mes+ "</td>" +
                        "<td ><a href='#' data-iconpos='notext' data-role='button' data-icon='grid' οnclick='del(this)'>点击</a></td>" +
                        "</tr>";
                    $("#usertable tbody").append(tr);
                    map[r.data.ID] = r.data.ID;

                }
            },
            events: {
			xxx;
            }
        });

6.在上述table中添加del方法，在页面上删除该行，这里没有实现在数据库中得删除，可以自行添加。

///table删除按钮  
      function del(obj) {  
          var trId = obj.parentNode.parentNode.id;        //获取当前元素的父节点的父节点的id，即要删除的行的id  
          var trObj = document.getElementById(trId);  
          document.getElementById("table_tbody").removeChild(trObj);  
      }