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 1455 N个短木棒 拼成长度相等的几根长木棒 (DFS)
    hdu 1181 以b开头m结尾的咒语 (DFS)
    hdu 1258 从n个数中找和为t的组合 (DFS)
    hdu 4707 仓鼠 记录深度 (BFS)
    LightOJ 1140 How Many Zeroes? (数位DP)
    HDU 3709 Balanced Number (数位DP)
    HDU 3652 B-number (数位DP)
    HDU 5900 QSC and Master (区间DP)
    HDU 5901 Count primes (模板题)
    CodeForces 712C Memory and De-Evolution (贪心+暴力)
  • 原文地址:https://www.cnblogs.com/xiaxue168/p/10638896.html
Copyright © 2011-2022 走看看