Contents
  1. 1. jQuery获取table数据

jQuery获取table数据

当鼠标点击某一行时,需要获取该行的第一列数据或被点击的这一整行或部分数据,然后传递给API。

jQuery的两个函数:closet()find()

closet()函数,从根开始遍历DOM树,第一个发现的即元素即所查找的元素,closet会包含自己

find()函数,查看对应的元素。不包含自己!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 基本的表格</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-responsive table-hover" id="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>Get</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td class="name">Tanmay</td>
<td >Bangalore</td>
<td>
<button type="button" class="btn btn-default">Get1</button>
</td>
</tr>
<tr>
<td class="name">Sachin</td>
<td>Mumbai</td>
<!--<td onclick="alert(this.rowSpan);">-->
<td>
<button type="button" class="btn btn-default">Get2</button>
</td>
</tr>
</tbody>
</table>
</body>
<script>
$(".btn.btn-default").click(function() {
var $row = $(this).closest("tr"); // Find the current row
var $text = $row.find(".name").text(); // Find the text by the className
// test it out
alert($text);
});
</script>
</html>

如下图:



关于HTMLTableCellElement 参考

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement

从这些API只能获取一些基本信息,通常都用不到(比如 rowSpan, colSpan, cellIndex)

其它参考: Stack Overflow


    
        
        版权声明:
        本文由Lomo创作和发表,采用署名(BY)-非商业性使用(NC)-相同方式共享(SA)国际许可协议进行许可,
        转载请注明作者及出处,本文作者为Lomo,本文标题为jquery get data from table.
    
    


 Leave a message ^_^:

Contents
  1. 1. jQuery获取table数据