表格操作

tbody默认存在

<table id="tab1" width="100%" border="1px">
        <tbody>
            <tr>
                <td>1</td>
                <td>xiao</td>
                <td>nan</td>
                <td><a href="javascript:;">delete</a></td>
            </tr>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </tbody>
    </table>
    <script>
    window.onload = function() {
        var otab = document.getElementById('tab1'); 
             
alert(otab.children[0].children[1].children[1].innerHTML);
    }
    </script>

tHead :表格头
tBodies:表哥正文
tFoot:表格尾
rows:行
cells:列
alert(otab.tBodies[0].rows[1].cells[1].innerHTML);

表格数据操作

 <script>
    window.onload = function() {
        var data=[
        {id:1,username:'xiao',sex:'nan'},
        {id:2,username:'xiao',sex:'nan'},
        {id:3,username:'xiao',sex:'nan'},
        {id:4,username:'xiao',sex:'nan'},
        {id:1,username:'xiao',sex:'nan'},
        {id:2,username:'xiao',sex:'nan'},
        {id:3,username:'xiao',sex:'nan'},
        {id:4,username:'xiao',sex:'nan'},
        {id:1,username:'xiao',sex:'nan'},
        {id:2,username:'xiao',sex:'nan'},
        {id:3,username:'xiao',sex:'nan'},
        {id:4,username:'xiao',sex:'nan'},
        {id:1,username:'xiao',sex:'nan'},
        {id:2,username:'xiao',sex:'nan'},
        {id:3,username:'xiao',sex:'nan'},
        {id:4,username:'xiao',sex:'nan'},
        {id:1,username:'xiao',sex:'nan'},
        {id:2,username:'xiao',sex:'nan'},
        {id:3,username:'xiao',sex:'nan'},
        {id:4,username:'xiao',sex:'nan'},
        {id:1,username:'xiao',sex:'nan'},
        {id:2,username:'xiao',sex:'nan'},
        {id:3,username:'xiao',sex:'nan'},
        {id:4,username:'xiao',sex:'nan'},
        ]
        var otab = document.getElementById('tab1');
        var otbody=otab.tBodies[0];
        // alert(otab.children[0].children[1].children[1].innerHTML);
        // alert(otab.tBodies[0].rows[1].cells[1].innerHTML);
        for (var i = 0; i < data.length; i++) {
            otr=document.createElement('tr');
            otbody.appendChild(otr);

            if (i%2==0) {
                otr.style.background='red';
            }
            else {
                otr.style.background='gray';
            
            }
            for (key in data[i]) {
            otd=document.createElement('td');
            otr.appendChild(otd);
            otd.innerHTML=data[i][key];
            }
            otd=document.createElement('td');
            otr.appendChild(otd);
            
            oa=document.createElement('a');
            oa.innerHTML='删除';
            oa.href='javascript:;';
            otd.appendChild(oa);

            oa.onclick=function () {
                otbody.removeChild(this.parentNode.parentNode);
                for (var i = 0; i < otbody.rows.length; i++) {
                    if (i%2==0) {
                         otbody.rows[i].style.background='red';
                    }
                    else{
                        otbody.rows[i].style.background='gray';
                    }
                }

            }
            // otd=document.createElement('td');
            // otr.appendChild(otd);
            // otd.innerHTML=data[i].id;

            // otd=document.createElement('td');
            // otr.appendChild(otd);
            // otd.innerHTML=data[i].username;
            // otd=document.createElement('td');
            // otr.appendChild(otd);
            // otd.innerHTML=data[i].sex;
        }
    }
    </script>