3.5、节点操作练习及表格的操作

一、主要练习节点的操作

   <table border="1px" cellspacing="0" cellpadding="0" style="width: 500px">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>武力值</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var data = [{
            id: 1,
            name: '亚瑟',
            wuli: 90,
        }, {
            id: 2,
            name: '刘邦',
            wuli: 75,
        }, {
            id: 3,
            name: '马超',
            wuli: 80,
        }]
        var tbody = document.getElementsByTagName('tbody')[0]
        console.log(tbody)
        for (var i = 0; i < data.length; i++) {
            //创建编号
            var tr = document.createElement('tr')
            var td = document.createElement('td')
            td.innerHTML = data[i].id
            tr.appendChild(td)
                // tbody.appendChild(tr)
                //创建姓名
            var td = document.createElement('td')
            td.innerHTML = data[i].name
            tr.appendChild(td)

            //创建物理
            var td = document.createElement('td')
            td.innerHTML = data[i].wuli
            tr.appendChild(td)


            //创建删除
            var td = document.createElement('td')
            var oa = document.createElement('a')
            oa.innerHTML = '删除'
            oa.href = 'javascript:;'
            oa.onclick = function() {
                tbody.removeChild(this.parentNode.parentNode)
            }
            td.appendChild(oa)
            tr.appendChild(td)
            tbody.appendChild(tr)
        }
    </script>

二、表格操作

<table border='1px' cellspacing='0' cellpadding='0' style="width: 500px">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>

    </thead>
    <tbody>

        <tr>
            <td>213</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>213</td>
            <td>123</td>
            <td>123</td>
        </tr>

        <tr>
            <td>213</td>
            <td>123</td>
            <td>123</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            <td>2121</td>
            <td>1212</td>
            <td>1212</td>
        </tr>

    </tfoot>
</table>
<script>
    otab = document.getElementsByTagName('table')[0],
        //快速获取thead
        otab.tHead.style.background = '#ccc'

    //快速获取tfoot
    otab.tFoot.style.background = '#ccc'

    //快速获取一堆tbody  是一个数组
    var body = otab.tBodies
    console.log(body) //[tbody]

    var body1 = otab.tBodies[0]
    console.log(body1) //tbody所有的元素
        //获取tbody的所有行  是一个数组
    console.log(body1.rows) //[tbody]
    console.log(body1.rows[0].style.background = 'red') //tbody的第一个tr
    console.log(body1.rows[1].style.background = 'yellow') //tbody的第一个tr
    console.log(body1.rows[2].style.background = 'green') //tbody的第一个tr


    //找到tbody里的某个td
    var tbody2 = otab.tBodies[0].rows[0].cells[0].style.background = 'black'
    console.log(tbody2[0])


    //thoot   表格.tHoot  一个
    //tbody   表格.tBodies 一堆
    //tFoot   表格.tFoot 一个
    //tbody的所有tr  表格.tBodeis[0].rows
    //tbody的tr的所有td  表格.tBodeis[0].rows[0].cells