Administrator
发布于 2020-07-24 / 14715 阅读 / 0 评论 / 0 点赞

DOM对table的操作

DOM对table的操作

DOM操作里面会经常涉及到对表格table的一个操作过程,如获取表格里在的某一行或某一列

<table class="table1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>张珊</td>
        <td>女</td>
        <td>18</td>
        <td>吃饭,睡觉</td>
    </tr>
	<tr>
        <td>李四</td>
        <td>男</td>
        <td>22</td>
        <td>打牌,看电视</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>34</td>
        <td>吃饭,睡觉 ,打豆豆</td>
    </tr>
    <tr>
        <td>赵六</td>
        <td>男</td>
        <td>25</td>
        <td>玩游戏,写代码</td>
    </tr>
</table>

现在我们开始操作table

var table1 = document.querySelector(".table1");
  • rows属性返回当前表格里面的行,table1.rows它是一个HTMLCollection的集合
  • cells属性返回当前行的所有列table1.rows[0].cells。它也是一个HTMLCollection的集合
table1.rows[1].cells[0].innerText

要求:请将上面的表格转换成如下对象

var students = [{
    userName: "张珊",
    sex: "女",
    age: 18,
    hobby: "吃饭,睡觉"
}, {
    userName: "李四",
    sex: "男",
    age: 22,
    hobby: "打牌,看电视"
}, {
    userName: "王五",
    sex: "男",
    age: 34,
    hobby: "吃饭,睡觉 ,打豆豆"
}, {
    userName: "赵六",
    sex: "男",
    age: 25,
    hobby: "玩游戏,写代码"
}];

评论