table少见的写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
    </style>
</head>
<body>
<table id="tab1" border="1" width="400">
    <thead>
        <td>编号</td>
        <td>姓名</td>
        <td></td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>blue</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>blue2</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>blue3</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>blue4</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>blue5</td>
            <td></td>
        </tr>
    </tbody>
</table>
<script>
    常规获取table中的某列,以下所示;
//    var oTab=document.getElementById("tab1");
//    var tBody=oTab.getElementsByTagName("tbody")[0];
//    var oTr=tBody.getElementsByTagName("tr")[0];
//    var oTd=oTr.getElementsByTagName("td")[1];
//    oTd.style.background="red";
    简写为:
var oTd=document.getElementById("tab1").tBodies[0].rows[0].cells[1].style.background="red";
</script>
</body>
</html>

如此可见在table中获取tbody,能够简写为tBodies,获取tr简写为rows,获取td简写为cellshtml

相关文章
相关标签/搜索