业余前端 --2天的工作总结[留着以后看,需要的也方便借鉴]

来源：互联网发布：java 多泛型参数编辑：程序博客网时间：2024/05/24 02:28

话不多说先上效果，要实现一个全部动态生成的页面，随着服务器传过来的数据动态变化。开发工具vs2013

1.HTML页面

<!DOCTYPE html>
<html>
<head>
    <title>列表展示</title>
    <link href="../css/ListShow.css" rel="stylesheet">
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../js/listshow.js" ></script>
</head>
<body>
    <div id="left">
    </div>
    <div class="main">
        <div id="firstLevel"></div>
        <div id="secondLevel"></div>
    </div>
</body>
</html>

2.CSS

body {
}
      * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html {
            height: 100%;
            overflow: hidden;

        }

        body {
            height: 100%;
            overflow: hidden;
        }

        div {
            background: none;
            line-height: 1.6;
        }

        #left {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 100%;
            overflow: auto;
        }

        .main {
            position: absolute;
            left: 200px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            overflow: auto;
        }

        .main iframe {
            width: 100%;
            height: 100%;
        }

#leftTable {
   font-family:"微软雅黑","Arial","Tahoma","雅黑";
   font-size:14px;
   border:0px;

   width:200px;
   border-collapse:collapse;
}

#_label {
background-color:#CCCCCC;
display:block;
width:30px;
height:23px;

}
#tableRow {
background-color:#CCCCCC;
height:35px;
}

#tdId {
width:50px;
border:0px;
}

#firstLevel{
background-color:#ebe2e2;
font-family:"微软雅黑","Arial","Tahoma","雅黑";
font-size:14px;
}

#secondLevel{
font-family:"微软雅黑","Arial","Tahoma","雅黑";
font-size:12px;
}

3.JS

var serverInfo = [];
var serverData = [];
var userData = [];
$(document).ready(function () {
    //处理服务器传回的具体数据【模拟】
    serverData.push(new ServerData(1, '1111111111111111'));
    serverData.push(new ServerData(1, '11111111111111111212'));
    serverData.push(new ServerData(2, '1111111111111111da'));
    serverData.push(new ServerData(2, '1111111111111111112'));
    serverData.push(new ServerData(2, '1111111111111111ada'));
    serverData.push(new ServerData(2, '1111111111111111asda'));
    serverData.push(new ServerData(2, '1111111111111111asda'));
    serverData.push(new ServerData(3, '1111111111111111'));
    serverData.push(new ServerData(3, '1111111111111111asda'));
    serverData.push(new ServerData(3, '1111111111111111'));

    userData.push(new ServerData(1, '1111111111111111'));
    userData.push(new ServerData(1, '1111111111111111'));
    userData.push(new ServerData(3, '1111111111111111'));
    userData.push(new ServerData(2, '1111111111111111'));
    userData.push(new ServerData(2, '1111111111111111'));
    //构造服务器列表
    serverInfo.push(new ServerObject('server', 0, 0, 0, 0));
    serverInfo.push(new ServerObject('插件', 10, 2, 5, 3,serverData));
    serverInfo.push(new ServerObject('用户', 5, 2, 2, 1,userData));
    serverInfo.push(new ServerObject('系统', 5, 1, 1, 3));
    serverInfo.push(new ServerObject('网关', 6, 2, 2, 2));
    serverInfo.push(new ServerObject('数据库', 1, 0, 0, 0));

    //网关数据
    serverInfo.push(new ServerObject('netgate', 0, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxxxx', 35, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxxxxxxx', 23, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxxxxxxxx', 12, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxxxxx', 45, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxx', 1, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxxxxxxxxx', 12, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxxxxxxxxxxxxx', 45, 0, 0, 0));
    serverInfo.push(new ServerObject('xxxxxxxxxxx', 33, 0, 0, 0));
    //1 online 2 offline 3 unknow

createServerTable(serverInfo);
});

function ServerObject(key, value, good, bad, unknow,obj) {
    this.key = key;//名称
    this.value = value;//总数量
    this.good = good;//正常
    this.bad = bad;//不正常
    this.unknow = unknow;//未知
    this.obj = obj;
}

function ServerData(status, name) {
this.status = status;//状态
this.name = name;//名称
}

        //新建一行并创建两列
        var _tr = _table.insertRow(i);
        //_tr.setAttribute("Rowid", i);

        _tr.onclick = function clickFunc() {
            //获取当前行号和列号
            //var rowindex = document.getElementById("leftTable").;
            //$("table tr").bind("click",function () {
            //var tdSeq = $(this).parent().find("td").index($(this)[0]);
            //var trSeq = $(this).parent().parent().find("tr").index($(this).parent()[0]);
            //alert("第" + (trSeq + 1) + "行，第" + (tdSeq + 1) + "列");

            //var label = document.createElement("label");
            var tdrowindex = $(this).index();//获取当前点击的行号
            var total = serverinfo[tdrowindex].value;
            var good = serverinfo[tdrowindex].good;
            var bad = serverinfo[tdrowindex].bad;
            var unknow = serverinfo[tdrowindex].unknow;
            showRightPartTop(total, good, bad, unknow);

            if (serverinfo[tdrowindex].obj != null) {
                showRightPartSec(serverinfo[tdrowindex].obj);
            }
        };

        _tr.onmouseover = function changeColor() {
            this.style.backgroundColor = "#009900";
        }
        _tr.onmouseout = function changeBefore() {
            this.style.backgroundColor = "";
        }
        _tr.setAttribute("height", "35");
        var _td = _tr.insertCell(0);
        _td.setAttribute("id", "tdId");
        _td.setAttribute("align", "center");
        var _label = document.createElement("label");
        _label.setAttribute("id", "_label");
        _label.innerHTML = serverinfo[i].value;
        _td.appendChild(_label);
        var _td = _tr.insertCell(1);
        var _tn = document.createTextNode(serverinfo[i].key);
        _td.appendChild(_tn);
    }

//加入div中
container.appendChild(_table);
}

function showRightPartTop(total, good, bad, unknow) {
    var firstLevel = document.getElementById("firstLevel");
    firstLevel.innerHTML = "";
    var _table = document.createElement("table");
    var _tr = _table.insertRow(0);
    _tr.setAttribute("height", "31");
    //total
    var _td = _tr.insertCell(0);
    _td.setAttribute("width", "100");
    _td.setAttribute("align","center");
    var _tn = document.createTextNode("All   "+total);
    _td.appendChild(_tn);
    //good
    var _td = _tr.insertCell(1);
    _td.setAttribute("width", "50");
    _td.setAttribute("align", "center");
    var _imggood = document.createElement("img");
    _imggood.setAttribute("src", "../img/online.png");
    _td.appendChild(_imggood);
    var _tn = document.createTextNode(good);
    _td.appendChild(_tn);
    //bad
    var _td = _tr.insertCell(2);
    _td.setAttribute("width", "50");
    _td.setAttribute("align", "center");
    var _imggood = document.createElement("img");
    _imggood.setAttribute("src", "../img/offline.png");
    _td.appendChild(_imggood);
    var _tn = document.createTextNode(bad);
    _td.appendChild(_tn);
    //unknow
    var _td = _tr.insertCell(3);
    var _imggood = document.createElement("img");
    _imggood.setAttribute("src", "../img/unkown.png");
    _td.appendChild(_imggood);
    var _tn = document.createTextNode(unknow);
    _td.appendChild(_tn);

firstLevel.appendChild(_table);
}

function showRightPartSec(serverData) {
    var _secondLevel = document.getElementById("secondLevel");
    _secondLevel.innerHTML = "";
    var _table = document.createElement("table");
    _table.setAttribute("width","100%");
    var _tr = _table.insertRow(0);
    var _td = _tr.insertCell(0);
    _td.setAttribute("align", "center");
    var _tn = document.createTextNode("状态");
    _td.appendChild(_tn);
    var _td = _tr.insertCell(1);
    var _tn = document.createTextNode("名称");
    _td.appendChild(_tn);

    for (var i = 1; i < serverData.length+1 ; i++) {
        var _tr = _table.insertRow(i);
        _tr.setAttribute("id","secTr");
        if (i % 2 == 0) {
            _tr.setAttribute("bgcolor", "#ebe2e2");
            //_tr.setAttribute("width","100%");
        } else {
            _tr.setAttribute("bgcolor", "#F2F2F2");
            //_tr.setAttribute("width", "100%");
        }

细节

1.获取点击表格当前行事件的行号:$(this).index();

或者另外一种方式也可以获取当前点击的行号和列号，根据我的需求用的第一种

            //获取当前行号和列号
            //var rowindex = document.getElementById("leftTable").;
            //$("table tr").bind("click",function () {
            //var tdSeq = $(this).parent().find("td").index($(this)[0]);
            //var trSeq = $(this).parent().parent().find("tr").index($(this).parent()[0]);
            //alert("第" + (trSeq + 1) + "行，第" + (tdSeq + 1) + "列");

2.取消表格单元格之间的间隙

设置表格的属性：

_table.setAttribute("cellspacing", "0");
_table.setAttribute("cellpadding", "0"); 这样设置就OK了。

还有其他的细节都在代码里啦，时间关系不一一列举。

0 0