表格显示序号与设置值
<!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>
