通过js代码动态自定义css

我们调用封装好的js可以直接显示后端数据。既美观又方便。但是如果要动态显示数据而且不能用列表的格式该怎么办呢？

可以使用$("#mytesttable").append(str);方法自己通过js添加样式。

html代码

<div class="small-chat-box fadeInRight animated">
        <div class="heading" draggable="true" id="mytestymd">
        </div>
        <div class="content" id="mytesttable">
        </div>
    </div>
    <div id="small-chat">
        <span class="badge badge-warning pull-right" id="mytestnum"></span>
        <a class="open-small-chat">
            <i class="fa fa-comments"></i>
        </a>
    </div>

js代码

$.ajax({
            url: ctx + "module/clothStock/indexlist",
            type: "post",
            dataType: "json",
            success: function (json) {
                /*这个方法里是ajax发送请求成功之后执行的代码*/
                showData(json);//我们仅做数据展示
            },
            error: function (msg) {
                alert("ajax连接异常：" + msg);
            }
        });

        //展示数据
        function showData(json) {

            $("#mytestnum").empty()
            $("#mytestnum").append(json.total);

            $("#mytesttable").empty()
            var str = "";//定义用于拼接的字符串
            for (var i = 0; i < json.total; i++) {
                //拼接表格的行和列
                str = "<div class=\"left\">" + "<div class=\"chat-message active\">" + "<span>" + json.rows[i].colthmsg + "</span>" + "</div>" + "</div>";
                //追加到table中
                $("#mytesttable").append(str);
            }
        }