jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
花了一晚上的时间解决了一个看似很容易的问题。今晚做的这个东西中由于要获取某列中的一个ID值。如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得。
网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值。页面如下所示:
具体操作就是点击“删除”按钮,然后调用jquery插件页面,这时候需要获得相应行的“ID”进行操作。我的方法是:
先定义一个行数与列数的全局变量,然后在鼠标经过按钮时获得此行的行数与列数并付给此全局变量:
代码如下:
var trNum;
var tdNum;
$(function(){
//定义一个鼠标经过事件
$('#users td').hover(
function(){
//获得table的行号
trNum = $(this).parent().parent().find('tr').index($(this).parent()[0])+ 1;
//获得table的列号
tdNum = $(this).parent().find('td').index($(this)[0])+ 1;
}
);
其中,“users”为此table的ID.然后再根据此ID进行业务处理,如下所示:
代码如下:
01.//点击“弹出框”选择“确定”后的业务处理
$("#dialog-confirm").dialog({
autoOpen:false,
resizable:false,
height:150,
modal:true,
buttons:{
"确定":function(){
var au_id = $('#users').find('tr:eq(' + (trNum) + ')').find('td:eq(0)').text(); //获得对应第一列的ID值
//业务处理省略
……
},
"取消":function(){
$(this).dialog("close");
}
}}
);
小问题凝聚着大智慧,通过解决问题提高自己学习能力,解决问题的能力,是我一直崇尚的真理!
相关推荐
-
用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表格第一列值的方法
本文实例讲述了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 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
-
jQuery中table数据的值拷贝和拆分
在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决,有的人可能会说重新查一遍数据显示,有的人会说直接用js将值拷贝过去,然后再修改,不过现在就介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值. 母页显示数据格式如下: <div class="materialCode stdtable"> <h2>发货情况</h2> <ul class="theadUl clearfix">
-
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动态添加一行、删除一行
需求场景 1).添加一行 支持在任意行添加一行且可配置的,如可在第一行添加一行.第二行添加一行.倒数第一行添加一行.倒数第二行添加一行,随需求的变化都不会影响. 前提条件:行数需在表中存在否则添加不成功. 2).删除一行 支持动态删除一行. 先演示结果,如中意了在好好研究代码. 1.原始界面如下: 2.添加一行,如要添加一行需点击"添加"按钮,现点击两下会自动添加两行,效果如下截图: 3.删除一行,如要删除指定行,先要选中行然后在点击"删除"按钮进行删除(这不是废话
-
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某列的值(推荐)
在写此篇博文时,发现在以前曾写过<获取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表格的行和列的代码
首先要获取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 Ajax动态生成Table表格
前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q
-
jQuery获取table下某一行某一列的值实现代码
jQuery获取table下某一行某一列的值实现代码 最近需要获取到某个table下每一行某一列的值,用jQuery做了一会儿,过程如下,仅供参考: <div class="div"> <table name="info"><tr><td>lily<span>okok</span></td></tr><tr><td>18</td><
随机推荐
- JavaScript使用正则表达式获取全部分组内容的方法示例
- PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
- js动态修改表格行colspan列跨度的方法
- javascript实现listbox左右移动实现代码
- application对象统计所有用户对某网页的访问次数
- sqlserver 通用存储过程分页代码(附使用ROW_NUMBER()和不使用ROW_NUMBER()两种情况性能分析)
- Linux下安装Oracle(CentOS-Oracle 12c)的方法
- 避免jQuery名字冲突 noConflict()方法
- 如何减少浏览器的reflow和repaint
- JavaScript实现从数组中选出和等于固定值的n个数
- Android中Webview打开网页的同时发送HTTP头信息方法
- thinkPHP引入类的方法详解
- DevExpress获取TreeList可视区域节点集合的实现方法
- 用header 发送cookie的php代码
- Swift实现监听键盘通知及一些处理详解
- vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
- 易语言加入成员命令使用讲解
- 解决Python正则表达式匹配反斜杠''\''问题
- Android自定义带圆角的ImageView
- 值得分享的超全文件工具类FileUtil