软工试水日报-纯js原生简易动态表格 3/15

虽然使用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的话效果会更好

具体实现效果如下：

是不是稍微有点感觉了呢？