jQuery 遍历Table中tr中的td中的内容

最新推荐文章于 2020-12-22 12:50:47 发布

iteye_19583

最新推荐文章于 2020-12-22 12:50:47 发布

阅读量390

点赞数

文章标签： javascript xhtml ViewUI

1、$("#trID td").text()得到的是一个所以trID之中td的值返回一个字符串。

2、$("#trID").children 得到一个trID下的所有td，然后遍历$("#trID").children使用.eq(index).text()得到td中的值;

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script language="javascript">

$(document).ready(function() {
		$("#table a").each(function (){
		this.onclick = function(){
			var thisObj = this.parentNode.parentNode;
			var a = $(thisObj).children();
			var arr = new Array();
			var laber = $("#xiugai label");
			for(var i=0;i<a.length;i++){
				arr[arr.length] = a.eq(i).text();
			}
			for(var i=0;i<laber.length;i++){
				laber.eq(i).text(arr[i]);
			}
			
			$("#table").hide();
			$("#xiugai").show(2000)
		}
	});
});

function fanhui(){
	$("#table").show(2000);
	$("#xiugai").hide(2000);	
}


</script>
</head>

<body>
<div id ="table" > 
<table width="470" border="0" cellspacing="0" cellpadding="0">
  <tr id="tr1">
    <td>id</td>
    <td>名字</td>
    <td>密码</td>
    <td>操作</td>
  </tr>
  <tr id="tr2">
    <td>1</td>
    <td>张三</td>
    <td>12</td>
    <td><a href="#">删除</a></td>
  </tr>
  <tr id="tr3">
    <td>2</td>
    <td>李四</td>
    <td>34</td>
    <td><a href="#">删除</a></td>
  </tr>
  <tr id="tr4">
    <td>3</td>
    <td>王五</td>
    <td>56</td>
    <td><a href="#">删除</a></td>
  </tr>
  <tr id="tr5">
    <td>4</td>
    <td>六子</td>
    <td>78</td>
    <td><a href="#">删除</a></td>
  </tr>
</table>
</div>
<div id ="xiugai" style="display:none; background-color:#FFC; height:360px; width:260px">
	ID：<label></label><br />
    姓名:<label></label><br />
    密码:<label></label><br />
    <button οnclick="fanhui()">返回</button>
</div>
</body>
</html>