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

来源：互联网发布：视频网站程序 linux 编辑：程序博客网时间：2024/05/16 09:50

第一次发帖不足的地方请大家指出

ＨＴＭＬ

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Tr5ansitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>Jquery</title> </head> <body> <table id="MFsdata"cellspacing="0px"> <thead> <tr id="MFstr"class="MFstr">     <th>           表头     </th>     <th>           表头     </th>………… </tr> </thead> <tbody id="datas"> </tbody> </table> <div id="loading"style="top:50%; right:50%;position:absolute;padding:0px; margin:0px; z-index:999;">     <img src="../image/0.gif"alt="loading……"/> </div> </body> </html>

//清空当前数据function clearRowsSMS() {    $('#datas').empty();}function searchSMS() {    clearRowsSMS();    //每次请求前先清空当前显示的数据    $("#loading").show();    //添加一个等待图标，提高用户体验    $.ajax({        type: "Post",        //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;}

CSS

.throw {    color: #FC6;    font-size: 14px;}.red {    color: Red;    font-size: 14px;}.white {    color: #FDFDFD;    font-size: 14px;}.green {    color: #0F0;    font-size: 14px;}