DOM中表格元素动态获取和添加删除表格案列

表格元素的获取 

• table.tHead; 获取thead 获取到的是一个具体元素

• table.tBodies; 获取tbody 获取到的是一个集合

• table.tFoot; 获取tfoot 获取到的是一个具体元素

• tbody.rows; 获取tr 获取到是一个集合

• row.cells; 获取td 获取到是一个集合

 // 获取表格元素
        var table = document.querySelector("#table");

        // table.tHead;  获取thead  
        // 获取到的是一个具体元素
        var head = table.tHead;
        console.log(head);

        // table.tBodies;  获取tbody  
        // 获取到的是一个集合
        var bodys = table.tBodies;
        console.log(bodys);

        // table.tFoot; 获取tfoot
        var foot  = table.tFoot;
        console.log(foot);


        //tbody.rows; 获取tr  获取到是一个集合
        var trs = bodys[0].rows;
        console.log(trs);

        // row.cells;  获取td  获取到是一个集合
        var td1s = trs[0].cells;
        console.log(td1s);

 表格的操作

    <div>
        姓名:<input type="text" />
        年龄:<input type="text" />
        性别:<input type="text" />
        <button>添加</button>
    </div>