使用JS对表格中的行进行增删

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2<html xmlns="http://www.w3.org/1999/xhtml">

 3<head>

 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5<title>JS_array</title>

 6<script type="text/javascript">

 7    function printArray(){

 8        var arr = new Array() ;

 9        arr[0] = "One" ;

10        arr[1] = "Two" ;

11        arr[5] = "Five" ;

12        for(i=0; i<arr.length; i++){

13            alert(arr[i]) ;

14        }

15    }

16

17    function testTable(){

18        var t1 = document.getElementById('t1') ;  //返回指定ID的 html DOM 对象

19        var rows = t1.rows;

20        alert(rows.length) ;

21        alert(rows[1].cells[0].innerHTML) ;

22    }

23    function deleteRow(){ //删除最后一行

24        var t1 = document.getElementById('t1') ;

25        var rows = t1.rows ;

26        t1.deleteRow(rows.length-1) ;

27    }

28    function insertRow(){ //在最后一行添加一行

29        var t1 = document.getElementById('t1') ;

30        var rows = t1.rows ;

31        var newRow = t1.insertRow(rows.length) ;

32        newRow.insertCell(0).innerHTML = "11&nbsp;" ;

33        newRow.insertCell(1).innerHTML = "31&nbsp;" ;

34    }

35

36</script>

37</head>

38

39<body>

40

41<table id="t1" width="200" border="1" cellspacing="0" cellpadding="0">

42  <tr>

43    <td>0,0</td>

44    <td>&nbsp;</td>

45  </tr>

46  <tr>

47    <td>1,0</td>

48    <td>&nbsp;</td>

49  </tr>

50  <tr>

51    <td>2,0</td>

52    <td>&nbsp;</td>

53  </tr>

54  <tr>

55    <td>3,0</td>

56    <td>&nbsp;</td>

57  </tr>

58</table>

59<p>&nbsp;</p>

60<p>

61  <input type="button" value="click" onclick="testTable();"  />

62</p>

63<p><br />

64  <input type="button" value="delete row" onclick="deleteRow()" /> 

65  <br />

66  <input type="button" value="insert row" onclick="insertRow()" />

67</p>

68<p>&nbsp;</p>

69</body>

70</html>

71

下图是显示效果

posted on 2010-11-11 22:33 zeroline 阅读(596) 评论(0) 编辑收藏所属分类: JavaScript

常用链接

留言簿

随笔分类

随笔档案

文章分类

文章档案

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园博客园最新博文博问管理
相关文章: javascript 触发事件列表 15款js编辑器大全收藏经典 JavaScript 正则表达式常用的js验证数字，电话号码，传真，邮箱，手机号码，邮编，日期使用JS对表格中的行进行增删 JavaScript中复选框的全选和反选功能的实现