zoukankan      html  css  js  c++  java
  • jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery遍历Table表格的行和列</title>
        <script type="text/javascript" src="http://localhost/libs/jquery/2.1.1/jquery.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;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>BZ02</td>
                <td>张四</td>
                <td>网页设计</td>
                <td>软件设计师</td>
            </tr>
            <tr style="height:30px;" align="center">
                <td>03</td>
                <td>BZ03</td>
                <td>张五</td>
                <td>软件工程</td>
                <td>软件工程师</td>
            </tr>
            <tr style="height:30px;" align="center">
                <td>04</td>
                <td>BZ04</td>
                <td>张六</td>
                <td>数据库教程</td>
                <td>数据库设计师</td>
            </tr>
            <tr style="height:30px;" align="center">
                <td>05</td>
                <td>BZ05</td>
                <td>张七</td>
                <td>网络技术</td>
                <td>测试人员</td>
            </tr>
        </table>
    </body>
    </html>

    如果出现没有效果的同学,请检查 jquery.min.js 路径引用是否正确!

  • 相关阅读:
    HDU 5115 Dire Wolf ——(区间DP)
    2016 ICPC 大连网络赛 部分题解
    CodeForces 707D Persistent Bookcase ——(巧妙的dfs)
    HDU 5806 NanoApe Loves Sequence Ⅱ ——(尺取法)
    【Permutations II】cpp
    【Permutations】cpp
    【Subsets II】cpp
    【Subsets】cpp
    【Search a 2D Matrix】cpp
    【Search Insert Position 】cpp
  • 原文地址:https://www.cnblogs.com/xiaxue168/p/10638896.html
Copyright © 2011-2022 走看看