原生JS动态创建表格 兼容ie789

ie中表格的样式兼容

 table{width:200px;margin:50px auto;text-align: center;border-color:#ccc;}

<table border="1"  cellpadding="0" cellspacing="0" >
    <thead>
    <tr>
        <th>年份</th>
        <th>否已完成</th>
    </tr>
    </thead>
    <tbody >
    <tr>
        <td>2019</td>
        <td>是</td>
    </tr>
    </tbody>
</table>

ie浏览器中的样式 边框颜色未改变 border-color:#ccc;未起作用

谷歌浏览器中的样式正常

解决办法

<table  cellpadding="0" cellspacing="0" >
去掉 border="1" 用css加边框 如下

table,table td,table th{border:1px solid #ccc; border-collapse:collapse;}

ie中原生js动态创建表格兼容

不能像下面这样写 比如你先在页面写标签table 动态往tbody里面添加tr和td
因为ie浏览器中 用原生js innerHTML 只能添加一个完整标签 例如添加表格 table 必须是一个完整的table标签 不然会报错
SCRIPT438: 对象不支持“getElementsById”属性或方法

<table cellpadding="0" cellspacing="0" >
    <thead>
    <tr>
        <th>年份</th>
        <th>否已完成</th>
    </tr>
    </thead>
    <tbody id="year-list">
    </tbody>
</table>

    var nowYear=(new Date()).getFullYear();
    var box=document.getElementsById('year-list');
    box.innerHTML='';
    for (var i=nowYear;i>nowYear-7;i--){
        var html='<tr><td>'+i+'</td><td>是</td></tr>';
        box.innerHTML += html;
    }

解决办法

<div id="table-box">
   页面中要写一个元素 用来存放table 
</div>

    <!--填充表格内容-->
    var nowYear=(new Date()).getFullYear();
    var box=document.getElementById('table-box');
    var html='    <table  cellpadding="0" cellspacing="0" >\n' +
        '        <thead>\n' +
        '        <tr>\n' +
        '            <th>年份</th>\n' +
        '            <th>当前年度继续教育是否已完成</th>\n' +
        '        </tr>\n' +
        '        </thead>\n' +
        '        <tbody id="year-list">';
    for (var i=nowYear;i>nowYear-7;i--){
        html +='<tr><td>'+i+'</td><td>是</td></tr>';
    }
    html+='</tbody></table>';
    box.innerHTML=html;

值得一提的是 页面中用来存放table的 div 最好用id哦 如果用class ie9及以下不兼容 document.getElementsByClassName 会报 undefined