Small冯

 

jquery Ajax之后绑定到table 并添加样式

  今天是第一次在园子里 写东西 如果有什么错误和意见 请大家一定提出  

 1 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Tr5ansitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
 5 <title>Jquery</title>
 6 </head>
 7 <body>
 8 <table id="MFsdata"cellspacing="0px">
 9 <thead>
10 <tr id="MFstr"class="MFstr">
11     <th>
12           表头
13     </th>
14     <th>
15           表头
16     </th>…………
17 </tr>
18 </thead>
19 <tbody id="datas">
20 </tbody>
21 </table>
22 <div id="loading"style="top:50%; right:50%;position:absolute;padding:0px; margin:0px; z-index:999;">
23     <img src="../image/0.gif"alt="loading……"/>
24 </div>
25 </body>
26 </html>
//清空当前数据
function clearRowsSMS() {
    $('#datas').empty();
}
function searchSMS() {
    clearRowsSMS();
    //每次请求前先清空当前显示的数据
    $("#loading").show();
    //添加一个等待图标，提高用户体验
    $.ajax({
        type: "get",
        //get方式请求
        dataType: "json",
        //返回数据类型为json
        async: false,
        url: 'MFstock.ashx',
        data: "Str=" + PageIndex + "|" + SI,
        //要发送到后台的数据
        cache: false,
        timeout: 6000,
        //超时时间：6秒
        //请求错误
        error: function() {
            $("#loading").show();
        },
        //请求成功
        success: function(buffer) {
            var datas = buffer.r;
            //返回的数据
            $("#loading").hide();
            //隐藏当前图标
            if (datas == undefined || datas == "") {
                $("#MFsdata").find('tfoot').append("<tr><td colspan='6' align='center'>数据错误</td></tr>");
            } else {
                //循环显示数据
                $.each(datas,
                function(idx, item) {
                    var trColor;
                    var tbBody = "<tr class='jsctr' id='" + idx + "' onclick='mo(" + idx + ")')>"
                    tbBody += "<td class='throw'>" + item.s + "</td><td class='throw'><a href=javascript:fnMyChangeStock('" + item.a + "')> " + item.a + "</a></td> <td class='throw'>" + item.b + "</td>"
                    //根据不同的数据 添加不同的样式
                    if (item.c > 0) {
                        trColor = "red";
                        tbBody += "<td class='" + trColor + "'>" + forcheck(item.c) + "</td>"
                    }
                     else if (item.c == 0) {
                        trColor = "green";
                        tbBody += "<td class='" + trColor + "'>" + forcheck(item.c) + "</td>"
                    }
                     else {
                        trColor = "green";
                        tbBody += "<td class='" + trColor + "'>" + forcheck(item.c) + "</td>"
                    }
                    if (item.d > 0) {
                        trColor = "red";
                        tbBody += "<td class='" + trColor + "'>" + forcheck(item.d) + "</td>"
                    }
                     else if (item.d == 0) {
                        trColor = "white";
                        tbBody += "<td class='" + trColor + "'>" + forcheck(item.d) + "</td>"
                    }
                     else {
                        trColor = "green";
                        tbBody += "<td class='" + trColor + "'>" + forcheck(item.d) + "</td>"
                    }
                    tbBody += "</tr>"
                    $('#datas').append(tbBody);
                    //添加到显示容器中
                });
            }
        }
    });
}
//保留两位小数
function forcheck(x) {
    var f_x = parseFloat(x);
    if (isNaN(f_x)) {
        return x;
    }
    f_x = Math.round(f_x * 100) / 100;
    var s_x = f_x.toString();
    var pos_decimal = s_x.indexOf('.');
    if (pos_decimal < 0) {
        pos_decimal = s_x.length;
        s_x += '.';
    }
    while (s_x.length <= pos_decimal + 2) {
        s_x += '0';
    }
    return s_x;
}
.throw {
    color: #FC6;
    font-size: 14px;
}

.red {
    color: Red;
    font-size: 14px;
}

.white {
    color: #FDFDFD;
    font-size: 14px;
}

.green {
    color: #0F0;
    font-size: 14px;
}

至于后台的Ashx 也就组合一个 json的字符串 然后返回

posted on 2012-06-12 17:16  Small冯  阅读(956)  评论(0)  编辑  收藏  举报

导航