遍历表格内容的JavaScript实现-优快云博客

本文介绍如何使用JavaScript遍历HTML表格中的内容，通过实例展示了查找、获取和遍历表格元素的基本步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 遍历表格内容

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(function() {
                //1.找到table
                var tab = document.getElementById("table");
                //2.获取行对象数组
                var rows = tab.rows;
                //3.遍历表格
                for(var i=0;i<rows.length;i++) {
                    //4.获取列对象数组的长度
                    var cols = rows[i].cells.length;
                    for(var j=0;j<cols;j++) {    
                        alert(i + "行" + j + "列元素内容： " + rows[i].cells[j].innerText);
                    }
                }        
            });
        </script>        
        <style>
            .tdText {text-align:center;}    
        </style>
    </head>
    <body>
        <center><h4>遍历表格内容</h4></center>
        <table border="1" cellspacing="0" align="center" width="60%" id="table">
            <tr>
                <td class="tdText">一行一列</td><td class="tdText">一行二列</td><td class="tdText">一行二列</td>
            </tr>
            <tr>
                <td class="tdText">二行一列</td><td class="tdText">二行二列</td><td class="tdText">二行三列</td>
            </tr>
            <tr>
                <td class="tdText">三行一列</td><td class="tdText">三行二列</td><td class="tdText">三行三列</td>
            </tr>
        </table>
    </body>
</html>