5月7日

虽然使用layui的表格很方便,但总归想挑战一下自己嘛,所以尝试了js的表格(写完之后觉得自己好sb,还在用各种超链实现换页,但愿能成为大家的参考)

复制代码
<script type = 'text/javascript'>
    var curRow;    //全局行号
    var curRowId; //选中行的记录信息的ID
    var curColor;
    function selectRow(tr){
        if(curRow){
            curRow.bgColor = curColor;
            curColor = tr.bgColor;
            tr.bgColor = "#FFE9B3";
        }else{
            curColor = tr.bgColor;
            tr.bgColor = "FFE9B3";
        }
        curRow = tr;
        curRowId = tr.id;
        City(tr.cells[2].innerText);
    }
    function cellcity(city){
        var tc=document.getElementById("tp");
        var ROW = tc.rows.length ;
        for(var i=1;i<ROW;i++){
            if(tc.rows[i].cells[2].innerHTML==city){
                tc.rows[i].bgColor = "#87CEFA";
            }else{
                tc.rows[i].bgColor = "#FFFFFF";
            }
        }
        
    }
    function cellpcity(city){
        var tc=document.getElementById("tp");
        var ROW = tc.rows.length ;
        for(var i=1;i<ROW;i++){
            if(tc.rows[i].cells[0].innerHTML==city){
                tc.rows[i].bgColor = "#F0E68C";
            }else{
                tc.rows[i].bgColor = "#FFFFFF";
            }
        }
        
    }
</script>
复制代码

通过这些函数来构建动态表格,如果大家想引入jquery的话效果会更好

具体实现效果如下:

原文地址:https://www.cnblogs.com/ldy2396/p/14910107.html