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 路径引用是否正确!

  • 相关阅读:
    Leetcode Plus One
    Leetcode Swap Nodes in Pairs
    Leetcode Remove Nth Node From End of List
    leetcode Remove Duplicates from Sorted Array
    leetcode Remove Element
    leetcode Container With Most Water
    leetcode String to Integer (atoi)
    leetcode Palindrome Number
    leetcode Roman to Integer
    leetcode ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/xiaxue168/p/10638896.html
Copyright © 2011-2022 走看看