Jqeury获取table当前行与指定列
今天遇到了一个Jqeury获取table当前行与指定列的问题:
大概的实现要求是一个页面中,上面有几个input输入框,下面有一个table,当在输入框中输入内容的时候,点击添加按钮的时候,在下面table中追加对应的代码,同时每行有 编辑、删除的操作。类似下面的页面操作:

下面是addTable(),就是点击按钮之后追加tr的操作
function addTable() {
………………
//得到每个input的值
var goodsClassVar = $("#goodsClass").val();
var goodsSubClassVar = $("#goodsSubClass").val();
var pcsVar = $("#pcs").val();
var classifierVar = $("#classifier").val();
var remarkVar = $("#remark").val();
var rAwbState = $("#resultAwbState").val();
// 追加html语句
var tr = "<tr><td style=\"display: none\">" + id + "</td><td name=\"goodsClass\">" + goodsClassVar + "</td><td name=\"goodsSubClass\">" + goodsSubClassVar + "</td><td name=\"pcs\">" + pcsVar +
"</td><td name=\"classifier\">" + classifierVar + "</td><td name=\"remark\">" + remarkVar + "</td><td>" +
"<a class=\"bs-btn bs-btn-sm bs-btn-default\" name=\"edit\" onclick=\"editTable(this)\"><span>编辑</span></a>" +
"<a class=\"bs-btn bs-btn-sm bs-btn-default\" name=\"del\" onclick=\"delTable(this)\"><span>删除</span></a>" + "</td></tr>";
$("#tablelist").append(tr);
………………
}
添加数据之后的table样式如下面所示:

之后是要求点击“编辑”按钮之后,获得当前行的信息,当然上面的代码中可以看出我是把信息的主键id所在的td列给隐藏了。下面就是editTable()的函数,点击编辑的操作:
function editTable(id) {
//得到当前所在行
var rows = id.parentNode.parentNode.rowIndex;
//得到所在行的第一列的内容
var recId = $("#tablelist tr:eq(" + rows + ") td:eq(0)").html()
}
主要的方法就是 $("table的id tr:eq(第几行) td:eq(第几列)").html()
因为对JQuery的知识懂得非常的少,今天的这个小小的问题困扰了我好久,就记录下来,以防以后忘记。当然能帮助到别人更好!
Jqeury获取table当前行与指定列的更多相关文章
- jquery获取table的行数、列数
$("#grd").find("tr").length; //行数 $("#grd").find("tr").find( ...
- table 中实现 控制 指定列的 左对齐 右对齐方式
.listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...
- jquery 获取table当前行值
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Jquery 获取table当前行内容
$("a[name='checkOriginal']").click(function () { var parent = $(this).parent().parent().fi ...
- js循环获取table中的值
<script type="text/javascript"> function getTdValue() { var tableId = document.getEl ...
- 用JavaScript,获取Table中指定的行、列
前言: 先要谢谢George Wing的慷慨赠书<悟透JavaScript>,让我更加感受到了技术交流的重要性,呵呵~ 进入正题,面试题中有一题:如何通过JavaScript获取Table ...
- jquery获取table指定行和列的数据(当前选中行、列)
//不多说,直接上代码.$("table tr").click(function() {//为表格的行添加点击事件 var tr = $(this);//找到tr原色 var td ...
- 使用laravel的Eloquent模型获取数据库的指定列
使用laravel的Eloquent模型获取数据库的指定列 使用Laravel的ORM——Eloquent时,时常遇到的一个操作是取模型中的其中一些属性,对应的就是在数据库中取表的特定列. 如果使 ...
- DataTable相关操作,筛选,取前N条数据,去重复行,获取指定列数据
#region DataTable筛选,排序返回符合条件行组成的新DataTable或直接用DefaultView按条件返回 /// <summary> /// Dat ...
随机推荐
- codeforces 659A Round House
A. Round House time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- QTbaWidget控件几个例程 【worldsing笔记】
Qt Creator自带的 QTabWidget控件几个例程 在Qt Windos版本安装后,在Example目录可以找到与QTabWidget相关的工程Demo,如果按默认安装的话他们分别是: ...
- POJ 3617 Best Cow Line (贪心)
题意:给定一行字符串,让你把它变成字典序最短,方法只有两种,要么从头部拿一个字符,要么从尾部拿一个. 析:贪心,从两边拿时,哪个小先拿哪个,如果一样,接着往下比较,要么比到字符不一样,要么比完,也就是 ...
- How to create custom methods for use in spring security expression language annotations
From:http://stackoverflow.com/questions/6632982/how-to-create-custom-methods-for-use-in-spring-secur ...
- How Tomcat Works(十八)
在前面的文章中,如果我们要启动tomcat容器,我们需要使用Bootstrap类来实例化连接器.servlet容器.Wrapper实例和其他组件,然后调用各个对象的set方法将它们关联起来:这种配置应 ...
- My集合框架第五弹 最小堆
二叉堆(以最小堆为例),其具有结构性质和堆序性质结构性质: 堆是一棵完全的二叉树,一颗高为h的完全二叉树有2^h到2^h-1个节点,高度为log N 而且该结构可以很容易的使用数 ...
- ELF学习--装载过程
当我们在linux bash下执行ELF程序时,Linux系统是怎样装载和执行的呢? 1.bash进程fork出子进程 2.在bash的子进程中调用execve系统调用来执行指定的ELF. 3.exe ...
- 【AS3 Coder】任务七:初涉PureMVC——天气预报功能实现
转自:http://www.iamsevent.com/post/36.html AS3 Coder]任务七:初涉PureMVC——天气预报功能实现 使用框架:AS3任务描述:了解PureMVC框架使 ...
- cocos2dx 手势识别
转自:http://blog.csdn.net/qq634416025/article/details/8685187 g_rGemertricRecognizer = new GeometricRe ...
- WinSock异步IO模型之Select
如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是: ■ 选择(select): ■ 异步选择(WSAAsyncSelec ...