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

jQuery遍历Table表格的行和列的更多相关文章

  1. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  2. jquery隐藏table表格的某一列

    jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列

  3. POI教程之第二讲:创建一个时间格式的单元格,处理不同内容格式的单元格,遍历工作簿的行和列并获取单元格内容,文本提取

    第二讲 1.创建一个时间格式的单元格 Workbook wb=new HSSFWorkbook(); // 定义一个新的工作簿 Sheet sheet=wb.createSheet("第一个 ...

  4. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  5. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

  6. jQuery遍历table中间tr td并获得td价值

    jQuery遍历table中间tr td并获得td中间值 $(function(){ $("#tableId tr").find("td").each(func ...

  7. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  8. jQuery实现表格冻结行和列

    前几天,遇到一个需求是要将表格的前几行和前几列冻结即固定,就是在有滚动条的情况下,保持那几行和那几列固定,这个需求其实是一个非常常见的需求,因为在涉及好多行和列时,在拖动滚动条时,我们需要知道每行每列 ...

  9. js遍历table 和 jquery 遍历table

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

随机推荐

  1. 利用Admin-LTE项目搭建自己前端的开发框架模板

    1 完整版本 1.1 下载admin-lte项目源代码 github下载地址:点击前往 三少云盘地址:点击前往 1.2 查看admin-lte精简主页源代码 页面地址:点击前往 注意:由源代码可以知道 ...

  2. ubuntu下hive-0.8.1配置

    1.下载hive包wget http://labs.mop.com/apache-mirror/hive/stable/hive-0.8.1.tar.gz,并用tar -xzvf 将其解压到要安装的目 ...

  3. java类什么时候初始化?

    Java虚拟机规范中并没有进行强制玉树什么情况下需要开始类加载过程.但是对于初始化阶段,虚拟机规范则是严格规定了有且仅有5种情况必须立即对类进行“初始化”(而加载,验证,准备自然需要在此之前开始): ...

  4. url中传中文

    function gotoPage(code,name){//name为中文 window.location.href="upload.jsp?bigCategoryCode="+ ...

  5. 1.7 xss之同源策略与跨域访问

    同源策略: 同源策略 在web应用的安全模型中是一个重要概念.在这个策略下,web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时.源是由URI,主机名,端口号组合而 ...

  6. Error creating form bean of class com.onlinebookstore.presentation.CatalogBean

    Error creating form bean of class com.onlinebookstore.presentation.CatalogBean 可能是action form未编译 这个问 ...

  7. 树莓派配置(一):打开SPI

    1.树莓派默认SPI关闭,在进行编程前需要打开SPI cd /boot/ sudo vi config.txt 将#dtparam=spi=off 改成:dtparam=spi=on 重启 sudo ...

  8. IIS 找不到.net framework 4.0/4.5程序池

    通常情况下是因为没注册造成的,也有可能跟操作系统有关系 以管理员身份运行cmd   打开我的电脑 C:\Windows\System32\cmd.exe,右键以管理员身份运行 然后:C:\WINDOW ...

  9. [Unity3D] 5.0 图集合并扩展工具,用于解决UGUI与AssetBundle打包造成资源包过大的问题

    [Unity3D] 5.0 图集合并扩展工具,用于解决UGUI与AssetBundle打包造成资源包过大的问题 2017年07月05日 15:57:44 阅读数:1494 http://www.cpp ...

  10. 【转载】【爬坑记录】hyperledger caliper 性能测试工具使用的一些问题记录

    原文: https://blog.csdn.net/raogeeg/article/details/82752613 安装方法详见:https://github.com/hyperledger/cal ...