js如何实现简单的表格增删效果


本文摘自PHP中文网,作者V,侵删。

先来看一下效果:

e23aabd856ef73138405e7037597cd7.png

(推荐教程:javascript教程)

js实现:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>Title</title>

</head>

<!--4、编号:文本框

书名:文本框

作者:文本框

出版社:文本框

添加按钮

表格

编号 书名 作者 出版社 删除-->

</head>

 <body>

 <div id="all">

 <p>编    号:<input type="text"></p>

 <p>书    名:<input type="text"></p>

 <p>作    者:<input type="text"></p>

 <p>出版社 :<input type="text"></p>

 <p>           

  <input type="button" value="添加" id="tj">

        

  <input type="button" value="清除" id="cle">

 </p>

 </div>

 <script>

  

 var ins,tj,qc,tab,all;

 var bookData=["编号","书名","作者","出版社","删除"];

 init();

  

 function init() {

  all=document.getElementById("all");

  ins=document.getElementsByClassName("in");

  tj=document.getElementById("tj");

  qc=document.getElementById("cle");

  del=document.getElementById("del");

  

  tj.addEventListener("click",clickHandler);

  qc.addEventListener("click",clickQcHandler);

  creatTable();

 }

  

  

 function creatTable() {

  tab = $c("table", all, {

  width:"500px",

  borderCollapse:"collapse"

  });

  for (var i = 0; i < ins.length+1; i++) {//购物车表单数据赋值

  var th = $c("th", tab, {

   textAlign: "center",

   border: "1px solid #000000"

  });

  th.textContent=bookData[i];

  }

 }

  

 function clickHandler() {

  var tr = $c("tr", tab, {

  textAlign: "center",

  border: "1px solid #000000"

  });

  for (var i = 0; i < ins.length+1; i++) {//购物车表单数据赋值

  var td = $c("td", tr, {//列的创建

  textAlign: "center",

   border: "1px solid #000000"

  });

  if(i<ins.length){

   td.textContent = ins[i].value;

  }

  else if(i==ins.length){

   var del=$c("button", td);

   del.textContent="删除";

   del.addEventListener("click",clickDelHandler);

  }

  }

 }

  

 function clickDelHandler(e) {//删除 一行

  this.parentNode.parentNode.remove();

 }

  

 function clickQcHandler(e) {//清除 全部

  tab.remove();

  creatTable();

 }

  

 function $c(type,parent,style) {

  var elem=document.createElement(type);

  if(parent) parent.appendChild(elem);

  for(var key in style){

  elem.style[key]=style[key];

  }

  return elem;

 }

  

 </script>

 </body>

</html>

相关视频教程推荐:javascript视频教程

以上就是js如何实现简单的表格增删效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

js classname如何修改class属性

分享几个实用的单行 js 代码

js如何判断打开项目的浏览器类别

js null是什么类型

了解js中!/+/-/~ function() {/*...*/}()是什么意思

js实现加载时锁定html页面元素的方法

巧妙的给div、p标签添加onload事件

js实现图片无缝滚动

利用js实现图片的轮播效果

js如何实现递归函数

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...