jQuery获取table下某一行某一列的值实现代码

jQuery获取table下某一行某一列的值实现代码

最近需要获取到某个table下每一行某一列的值，用jQuery做了一会儿，过程如下，仅供参考：

<div class="div">
      <table name="info"><tr><td>lily<span>okok</span></td></tr><tr><td>18</td></tr><tr style="display:none"><td>hahhha</td></tr></table>
      <table name="info"><tr><td>tom</td></tr><tr><td>22</td></tr><tr style=""><td>hahhha2</td></tr></table>
      <table name="info"><tr><td>kai</td></tr><tr><td>34</td></tr><tr style="display:none"><td>hahhha3</td></tr></table>
</div>

这个大的div下有若干个table,现在我需要获取每个table下某一行某一列的值：

<script>
      var $tables = $(".div").find("table[name='info']");
      //alert($tables.prop("tagName")); //TABLE
      var length = $tables.length;
      //alert(length); //3
      for(var i=0; i<length; i++) {
        var $table = $tables.eq(i);
        //alert($table.prop("tagName")); //TABLE
        //eq(i)表示第i行
        var nameTd = $table.find("tr").eq(i).children("td").eq(0);
        //alert(nameTd.prop("tagName")); //TD
        alert(nameTd.text());
      } 

      alert(b.indexOf(a));
</script>

可依次弹出结果：lilyokok   tom kai

如果var nameTd = $table.find("tr").children("td").eq(2); 则依次弹出结果：hahhha   hahhha2  hahhha3，这说明，即使你设置隐藏，一样可以获取到值。

注：JQuery中读取dom对象的类型的语法是：$.prop("tagName")；还要注意find children eq（用于遍历dom集合中元素对象）等的用法。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • JQuery Ajax动态生成Table表格

    JQuery Ajax动态生成Table表格

    前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q

  • jQuery中table数据的值拷贝和拆分

    在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,不过现在就介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值. 母页显示数据格式如下: <div class="materialCode stdtable"> <h2>发货情况</h2> <ul class="theadUl clearfix">

  • jQuery实现动态给table赋值的方法示例

    jQuery实现动态给table赋值的方法示例

    本文实例讲述了jQuery实现动态给table赋值的方法.分享给大家供大家参考,具体如下: html 请忽视各种class,因为前端用的是layui <table class="layui-table" lay-skin="line" id="datas"> <colgroup> <col width="150"> <col width="200"> <

  • jQuery获取Table某列的值（推荐）

    jQuery获取Table某列的值（推荐）

    在写此篇博文时,发现在以前曾写过<获取DataTable选择第一行某一列值>http://www.cnblogs.com/insus/p/5434062.html . 但是与此篇所说的完全不一样.这篇Insus.NET需要的是jQuery去获取html table的某一行某一列的数据. 如下表: Html code: <table> <tr> <th style="width:10px;"><input id="Selec

  • jQuery实现获取table表格第一列值的方法

    jQuery实现获取table表格第一列值的方法

    本文实例讲述了jQuery实现获取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.or

  • jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    花了一晚上的时间解决了一个看似很容易的问题.今晚做的这个东西中由于要获取某列中的一个ID值.如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得. 网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值.页面如下所示:  具体操作就是点击"删除"按钮,然后调用jquery插件页面,这时候需要获得相应行的"ID"

  • 用jQuery获取table中行id和td值的实现代码

    用jQuery获取table中行id和td值的实现代码 <%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html lang="zh-cn"> <head> <title>点击</title>

  • 基于JQuery的动态删除Table表格的行和列的代码

    首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 复制代码 代码如下: for(var i=0;i<num+1;i++) { $("table tr").eq(i).find("td").eq(0).remove(); } 解释: num是从后台获取到的列表总和+1是为了表头那个也去掉. 第一个eq(i)是获取Table里的TR索引 第二个

  • jquery遍历table的tr获取td的值实现方法

    html代码: <tbody id="history_income_list"> <tr> <td align="center"><input type="text" class="input-s input-w input-hs"></td> <td align="center"><input type="text&q

  • JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row

  • 使用jquery给指定的table动态添加一行、删除一行

    使用jquery给指定的table动态添加一行、删除一行

    需求场景 1).添加一行 支持在任意行添加一行且可配置的,如可在第一行添加一行.第二行添加一行.倒数第一行添加一行.倒数第二行添加一行,随需求的变化都不会影响. 前提条件:行数需在表中存在否则添加不成功. 2).删除一行 支持动态删除一行. 先演示结果,如中意了在好好研究代码. 1.原始界面如下: 2.添加一行,如要添加一行需点击"添加"按钮,现点击两下会自动添加两行,效果如下截图: 3.删除一行,如要删除指定行,先要选中行然后在点击"删除"按钮进行删除(这不是废话

  • 模仿JQuery sortable效果 代码有错但值得看看

    复制代码 代码如下: <!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> <meta http-equiv=&qu

随机推荐