jquery實作table增删改

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

102

<code>html代碼</code>

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code> <code>lang</code><code>=</code><code>"en"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;增删改&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>rel = "stylesheet" </code><code>type</code><code>=</code><code>"text/css"</code> <code>href</code><code>=</code><code>"css/index.css"</code><code>/&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/jquery-3.1.1.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/index.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;!--添加,全選，反選，取消按鈕--&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"btn"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"添加"</code> <code>class</code><code>=</code><code>"one"</code><code>/&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"全選"</code> <code>class</code><code>=</code><code>"one"</code><code>/&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"反選"</code> <code>class</code><code>=</code><code>"one"</code><code>/&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"取消"</code> <code>class</code><code>=</code><code>"one"</code><code>/&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;!--結束--&gt;</code>

<code>    </code><code>&lt;!--員工資訊表--&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"tab"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>table</code> <code>border</code><code>=</code><code>"1"</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>tr</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>th</code><code>&gt;選擇&lt;/</code><code>th</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>th</code><code>&gt;員工姓名&lt;/</code><code>th</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>th</code><code>&gt;員工年齡&lt;/</code><code>th</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>th</code><code>&gt;員工職位&lt;/</code><code>th</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>th</code><code>&gt;編輯&lt;/</code><code>th</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>th</code><code>&gt;删除&lt;/</code><code>th</code><code>&gt;</code>

<code>            </code><code>&lt;/</code><code>tr</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>class</code><code>=</code><code>"checkbox"</code><code>/&gt;&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;alex&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;38&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;ceshi&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;&lt;</code><code>a</code> <code>class</code><code>=</code><code>"edit"</code> <code>href</code><code>=</code><code>"#"</code><code>&gt;編輯&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;&lt;</code><code>a</code> <code>class</code><code>=</code><code>"delete"</code> <code>href</code><code>=</code><code>"#"</code><code>&gt;删除&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;egon&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;kaifa&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;wupeiqi&lt;/</code><code>td</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>td</code><code>&gt;yuanhao&lt;/</code><code>td</code><code>&gt;</code>

<code>        </code><code>&lt;/</code><code>table</code><code>&gt;</code>

<code>    </code><code>&lt;!--遮罩--&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"shade hide"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;!--彈出表單--&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"add_form hide"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>form</code> <code>id</code><code>=</code><code>"form1"</code> <code>action</code><code>=</code><code>""</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>label</code> <code>for</code><code>=</code><code>"empname"</code><code>&gt;員工姓名:&lt;/</code><code>label</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"empname"</code> <code>name</code><code>=</code><code>"empname"</code><code>/&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>label</code> <code>for</code><code>=</code><code>"empage"</code><code>&gt;員工年齡:&lt;/</code><code>label</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"empage"</code> <code>name</code><code>=</code><code>"empage"</code><code>/&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>label</code> <code>for</code><code>=</code><code>"emp_position"</code><code>&gt;員工職位:&lt;/</code><code>label</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"emp_position"</code> <code>name</code><code>=</code><code>"emp_position"</code><code>/&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>br</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"儲存"</code> <code>id</code><code>=</code><code>"save"</code><code>/&gt;</code>

<code>            </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"取消"</code> <code>id</code><code>=</code><code>"cancel"</code><code>/&gt;</code>

<code>        </code><code>&lt;/</code><code>form</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"edit_form hide"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>form</code> <code>id</code><code>=</code><code>"form11"</code> <code>action</code><code>=</code><code>""</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>label</code> <code>for</code><code>=</code><code>"empname1"</code><code>&gt;員工姓名:&lt;/</code><code>label</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"empname1"</code> <code>name</code><code>=</code><code>"empname1"</code><code>/&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>label</code> <code>for</code><code>=</code><code>"empage1"</code><code>&gt;員工年齡:&lt;/</code><code>label</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"empage1"</code> <code>name</code><code>=</code><code>"empage1"</code><code>/&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>label</code> <code>for</code><code>=</code><code>"emp_position1"</code><code>&gt;員工職位:&lt;/</code><code>label</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>id</code><code>=</code><code>"emp_position1"</code> <code>name</code><code>=</code><code>"emp_position1"</code><code>/&gt;&lt;</code><code>br</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"儲存"</code> <code>id</code><code>=</code><code>"save1"</code><code>/&gt;</code>

<code>            </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"取消"</code> <code>id</code><code>=</code><code>"cancel1"</code><code>/&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<code>css代碼</code>

<code>.btn{</code>

<code>    </code><code>margin-top:20px;</code>

<code>    </code><code>margin-left: 400px;</code>

<code>}</code>

<code>.tab table{</code>

<code>    </code><code>line-height: 40px;</code>

<code>    </code><code>margin-top: 20px;</code>

<code>    </code><code>background-color: wheat;</code>

<code>    </code><code>text-align: center;</code>

<code>    </code><code>width: 600px;</code>

<code>.tab table a{</code>

<code>    </code><code>text-decoration: none;</code>

<code>.tab table a:hover{</code>

<code>    </code><code>color:red;</code>

<code>.hide{</code>

<code>    </code><code>display: none;</code>

<code>.shade{</code>

<code>    </code><code>position: fixed;</code>

<code>    </code><code>top: 0;</code>

<code>    </code><code>bottom: 0;</code>

<code>    </code><code>left: 0;</code>

<code>    </code><code>right: 0;</code>

<code>    </code><code>background-color: darkgray;</code>

<code>    </code><code>opacity: 0.4;</code>

<code>.add_form{</code>

<code>    </code><code>margin-left: 500px;</code>

<code>    </code><code>margin-top: 100px;</code>

<code>    </code><code>width: 460px;</code>

<code>    </code><code>height: 300px;</code>

<code>    </code><code>position: absolute;</code>

<code>.edit_form{</code>

<code>jquery代碼</code>

<code>/**</code>

<code> </code><code>* Created by hyh on 2017/8/8.</code>

<code> </code><code>*/</code>

<code>$(document).ready(function(){</code>

<code>   </code><code>$(document).on('click','.one',function(){</code>

<code>       </code><code>if($(this).val() == "添加"){</code>

<code>           </code><code>$(".shade").removeClass("hide");</code>

<code>           </code><code>$(".add_form").removeClass("hide");</code>

<code>           </code><code>$(".edit_form").addClass("hide");</code>

<code>           </code><code>$(".btn").addClass("hide");</code>

<code>           </code><code>$(".tab").addClass("hide");</code>

<code>       </code><code>}</code>

<code>       </code><code>else if($(this).val() == "全選"){</code>

<code>            </code><code>$(".checkbox").prop("checked",true);</code>

<code>       </code><code>else if($(this).val() == "反選"){</code>

<code>           </code><code>$(".checkbox").each(function(){</code>

<code>               </code><code>$(this).prop("checked", !$(this).prop("checked"));</code>

<code>           </code><code>});</code>

<code>       </code><code>else{</code>

<code>               </code><code>$(this).prop("checked",false);</code>

<code>   </code><code>});</code>

<code>   </code><code>$(document).on('click','.edit',function(e){</code>

<code>       </code><code>e.preventDefault();</code>

<code>       </code><code>var inx = $(this).parent().parent().index();</code>

<code>       </code><code>// alert(inx);</code>

<code>       </code><code>var empname=$(this).parent().parent().children().eq(1).text();</code>

<code>       </code><code>var empage=$(this).parent().parent().children().eq(2).text();</code>

<code>       </code><code>var emp_position=$(this).parent().parent().children().eq(3).text();</code>

<code>       </code><code>$("#empname1").prop("value",empname);</code>

<code>       </code><code>$("#empage1").prop("value",empage);</code>

<code>       </code><code>$("#emp_position1").prop("value",emp_position);</code>

<code>       </code><code>$(".btn").addClass("hide");</code>

<code>       </code><code>$(".tab").addClass("hide");</code>

<code>       </code><code>$(".add_form").addClass("hide");</code>

<code>       </code><code>$(".shade").removeClass("hide");</code>

<code>       </code><code>$(".edit_form").removeClass("hide");</code>

<code>       </code><code>$("#save1").click(function(){</code>

<code>            </code><code>// alert(inx);</code>

<code>           </code><code>empname = $("#empname1").val();</code>

<code>           </code><code>empage = $("#empage1").val();</code>

<code>           </code><code>emp_position = $("#emp_position1").val();</code>

<code>           </code><code>$("table").children().children().eq(inx).children().eq(1).text(empname);</code>

<code>           </code><code>$("table").children().children().eq(inx).children().eq(2).text(empage);</code>

<code>           </code><code>$("table").children().children().eq(inx).children().eq(3).text(emp_position);</code>

<code>           </code><code>$(".btn").removeClass("hide");</code>

<code>           </code><code>$(".tab").removeClass("hide");</code>

<code>           </code><code>$(".shade").addClass("hide");</code>

<code>           </code><code>$(".add_form").addClass("hide");</code>

<code>       </code><code>});</code>

<code>   </code><code>$("#save").click(function(){</code>

<code>               </code><code>var empname = $("#empname").val();</code>

<code>               </code><code>var empage = $("#empage").val();</code>

<code>               </code><code>var emp_position = $("#emp_position").val();</code>

<code>               </code><code>var htmlStr='&lt;</code><code>tr</code><code>&gt;'+</code>

<code>                </code><code>'&lt;</code><code>td</code><code>&gt;&lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>class</code><code>=</code><code>"checkbox"</code><code>&gt;&lt;/</code><code>td</code><code>&gt;'+</code>

<code>                </code><code>'&lt;</code><code>td</code><code>&gt;'+empname+'&lt;/</code><code>td</code><code>&gt;'+</code>

<code>                </code><code>'&lt;</code><code>td</code><code>&gt;'+empage+'&lt;/</code><code>td</code><code>&gt;'+</code>

<code>                </code><code>'&lt;</code><code>td</code><code>&gt;'+emp_position+'&lt;/</code><code>td</code><code>&gt;'+</code>

<code>                </code><code>'&lt;</code><code>td</code><code>&gt;&lt;</code><code>a</code> <code>class</code><code>=</code><code>"edit"</code> <code>href</code><code>=</code><code>"#"</code><code>&gt;編輯&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>td</code><code>&gt;'+</code>

<code>                </code><code>'&lt;</code><code>td</code><code>&gt;&lt;</code><code>a</code> <code>class</code><code>=</code><code>"delete"</code> <code>href</code><code>=</code><code>"#"</code><code>&gt;删除&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>td</code><code>&gt;'+</code>

<code>            </code><code>'&lt;/</code><code>tr</code><code>&gt;';</code>

<code>                </code><code>$("#empname").val('');</code>

<code>                </code><code>$("#empage").val('');</code>

<code>                </code><code>$("#emp_position").val('');</code>

<code>               </code><code>$("table").append(htmlStr);</code>

<code>               </code><code>$(".btn").removeClass("hide");</code>

<code>               </code><code>$(".tab").removeClass("hide");</code>

<code>               </code><code>$(".add_form").addClass("hide");</code>

<code>               </code><code>$(".edit_form").addClass("hide");</code>

<code>               </code><code>$(".shade").addClass("hide");</code>

<code>   </code><code>$(document).on('click','.delete',function(e){</code>

<code>       </code><code>$(this).parent().parent().remove();</code>

<code>});</code>

     本文轉自小白的希望 51CTO部落格，原文連結：http://blog.51cto.com/haoyonghui/1954584，如需轉載請自行聯系原作者