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

相關文章
相關標籤/搜索