表格显示序号与设置值
<!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>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格显示序号与设置值</title>
<script type="text/javascript">
//页面加载时候调用一次
$(document).ready(function(){
showIndex(); //显示序号
setValue(); //设置每行前四列值
});
//显示序号
function showIndex(){
$("#showIndex").click(function () {
$("#myTable tr").each(function(i, n){
var text = $(this).children("td:first").text(i+1);
})
});
}
//设置每行前四列值
function setValue(){
$("#setValue").click(function () {
$("#myTable tr").each(function(i, n){
$(this).children().eq(0).text("1111");
$(this).children().eq(1).text("2222");
$(this).children().eq(2).text("3333");
$(this).children().eq(3).text("4444");
})
});
}
</script>
</head>
<body>
<form name="test" id="test" action="">
<input type="button" name="showIndex" id="showIndex" value="显示序号" />
<input type="button" name="setValue" id="setValue" value="设置值" />
<table width="800" border="1" id="myTable">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
</table>
</form>
</body>
</html>
页:
[1]