003_HTML制作炫酷会议要点

在开会的时候，我们都会写上要点，然后在会中按着要点来进行，这次我们使用HTML + CSS + JS来实现一个会议记录的表格，还是很有逼格的。

1.搭建表结构

<!-- 表结构 -->
<h1>JavaWeb架构师</h1>
<table align="center" border="0" cellspacing="1px" id="tabId">
    <tr>
        <th>序号</th>
        <th>内容</th>
        <th>讲解人</th>
    </tr>
</table>

2.书写CSS样式

/*添加背景*/
body {
    background-image: url(../img/桌面背景.jpg);
}

/*表格的样式*/
table {
    /*表格背景颜色，最后会成为表格边框颜色*/
    background-color: rgba(255,248,220,0.5);
    margin-top: 20px;
    width: 900px;
    /*文本居中*/
    text-align: center;
}

/*双数表格的背景颜色*/
.evenTr {
    background-color: rgba(240,255,255,0.5);
} 

/*表格标题的背景颜色*/
tr {
    background-color: rgba(172,72,20,0.5);
}

/*单数表格的背景颜色*/
.oddTr {
    background-color:rgba(255,248,220,0.5);
}

/*标题的颜色*/
h1 {
    color: coral;
    text-align: center;
}

3.为动态的插入数据线书写JS代码

            
//控制各行变色的变量
var oddEven = 0;

//动态的插入数据项的函数
function insertInfor() {
    var tabId = document.getElementById("tabId");
    var index = 0;
    
    //插入HTML代码
    var htmlStr = "<tr>" +
        "<td>" + arguments[index++] + "</td>" +
        "<td>" +
        "<details>" +
        "<summary>" +
        "</summary>" +
        arguments[index++] +
        "</details>" +
        "</td>" +
        "<td>" + arguments[index++] + "</td>" +
        "</tr>  ";
    tabId.innerHTML += htmlStr;
    
    //最后一个tr是新插进去的，为它设置自己的样式
    var trTab = tabId.getElementsByTagName("tr");
    trTab = trTab[trTab.length - 1];            
    if( oddEven / 2 == 0 ) {
        oddEven++;
        //通过修改class的形式新增样式（直接更新，css里的样式不会应用到它的身上）
        trTab.className = "evenTr";
    } else {
        oddEven = 0;
        trTab.className = "oddTr";
    }
}

4.效果

这里写图片描述

效果展示与源码下载：点击这里