jQuery遍历表格中的TD的值

最新推荐文章于 2020-10-16 16:29:16 发布

dotuian

最新推荐文章于 2020-10-16 16:29:16 发布

阅读量1.5k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/dotuian/article/details/8548978

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<title>jQuery遍历表格</title>


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/*<![CDATA[*/
google.load("jquery","1");
/*]]>*/
</script>


</head>
<style>


tr {
	text-align: center;
	bgcolor: ##EAEAEA;
} 


td {
	font-size: 12px; 
	text-decoration: none;
	color: #355f72;
	bgcolor: #FFFFFF;
} 
</style>




<script language="javascript">


$(document).ready(function() {
	$("input").click(function(){
		$("#result").html("");


		var trs = $("table").children().children();


		for(var i=0; i<trs.length;i++){
			var tds = trs.eq(i).children();
			console.log("tds.length = " + tds.length);


			for(var j=0; j<tds.length; j++)	{
				$("#result").append(i + " " + j + "    " + $(tds).eq(j).text() + "  <br/>");
			}
		}


	});


});




</script>


<body>
<table width="500" border="1" cellpadding="5" cellspacing="1" bgcolor="#EAEAEA">
	<tr>
		<th>标题1</th>
		<th>标题2</th>
		<th>标题3</th>
		<th>标题4</th>
	</tr>
	<tr>
		<td>数值11</td>
		<td>数值12</td>
		<td>数值13</td>
		<td>数值14</td>
	</tr>
	<tr>
		<td>数值21</td>
		<td>数值22</td>
		<td>数值23</td>
		<td>数值24</td>
	</tr>
	<tr>
		<td>数值31</td>
		<td>数值32</td>
		<td>数值33</td>
		<td>数值34</td>
	</tr>
</table>


<p><input type="button" value="遍历表格"></p>
<p><div id="result"></div></p>


</body>
</html>

执行结果如下图所示:

dotuian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery遍历表格中的TD的值

jQuery遍历表格/*<![CDATA[*/google.load("jquery","1");/*]]>*/tr { text-align: center; bgcolor: ##EAEAEA;} td { font-size: 12px; text-decoration: none; color: #355f72; bgcolor: #FF
复制链接

扫一扫