jquery遍历table的行和列的实现方式

最新推荐文章于 2024-08-13 17:24:04 发布

南京闫伟亮的野爹

最新推荐文章于 2024-08-13 17:24:04 发布

阅读量2.1k

点赞数

分类专栏：前端文章标签： jQuery

原文链接：https://www.mk2048.com/blog/blog.php?id=2ai2cahaa&title=jquery%E9%81%8D%E5%8E%86table%E7%9A%84%E8%A1%8C%E5%92%8C%E5%88%97%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

                        
                    jQuery 中的 each 相当于 JavaScript 中的 for 语句，起到循环的作用。find 方法主要用于查询某一类对象的集合。下面笔者举一个遍历Table行和列的示例。 
 
 
    
   <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery遍历Table表格的行和列 - 乐猪</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tab1 tr").each(function(rowIndex) {
                alert($(this).find("td").first().html());
            });
        });  
    </script>

</head>
<body>
    <table id="tab1" border="1" style="border-collapse: collapse; width: 100%;">
        <tr style="height: 30px; font-weight: bold;" align="center">
            <td>
                序号
            </td>
            <td>
                编制号
            </td>
            <td>
                姓名
            </td>
            <td>
                单位
            </td>
            <td>
                职位
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                01
            </td>
            <td>
                BZ01
            </td>
            <td>
                张一
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                02
            </td>
            <td>
                BZ01
            </td>
            <td>
                张二
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                03
            </td>
            <td>
                BZ01
            </td>
            <td>
                张三
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                04
            </td>
            <td>
                BZ01
            </td>
            <td>
                张四
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                05
            </td>
            <td>
                BZ01
            </td>
            <td>
                张五
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                06
            </td>
            <td>
                BZ01
            </td>
            <td>
                张六
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                07
            </td>
            <td>
                BZ01
            </td>
            <td>
                张七
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
        <tr style="height: 30px;" align="center">
            <td>
                08
            </td>
            <td>
                BZ01
            </td>
            <td>
                张八
            </td>
            <td>
                广东蓝图
            </td>
            <td>
                软件工程师
            </td>
        </tr>
    </table>
</body>
</html> 
  