By

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数据