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;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>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 路徑引用是否正確!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM