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

最新推荐文章于 2021-08-06 16:18:40 发布

原创最新推荐文章于 2021-08-06 16:18:40 发布 · 置顶 · 701 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #jquery #ajax #class #function #xhtml

Jquery 专栏收录该内容

1 篇文章

订阅专栏

这篇博客探讨了如何在完成jQuery AJAX请求后，将返回的数据动态绑定到HTML表格中，并详细说明了如何为表格内容添加特定的CSS类以实现定制的样式效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

ＨＴＭＬ

<!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;
}