项目中一个新的需求,需要用js来编辑一个表格,包括添加一行,删除一行,添加一个单元格,删除一个单元格
注:示例代码不包括删除列和添加列
下面是js
1
一下是HTML代码
1
月份 | 5类别 | 6护理部 | 7大科 | 8
一月份 | 13 14 无 16 | 18 19 无 21 | 23 24 无 26 | 28
二月份 | 31 32 无 34 | 36 37 无 39 | 41 42 无 44 | 46
三月份 | 49 50 无 52 | 54 55 无 57 | 59 60 无 62 | 64
四月份 | 67 68 无 70 | 72 73 无 75 | 77 78 无 80 | 82
五月份 | 85 86 无 88 | 90 91 无 93 | 95 96 无 98 | 100
六月份 | 103104 无 106 | 108 109 无 111 | 113 114 无 116 | 118
七月份 | 121122 无 124 | 126 127 无 129 | 131 132 无 134 | 136
八月份 | 139140 无 142 | 144 145 无 147 | 149 150 无 152 | 154
九月份 | 157158 无 160 | 162 163 无 165 | 167 168 无 170 | 172
十月份 | 175176 无 178 | 180 181 无 183 | 185 186 无 188 | 190
十一月份 | 193194 无 196 | 198 199 无 201 | 203 204 无 206 | 208
十二月份 | 211212 无 214 | 216 217 无 219 | 221 222 无 224 | 226
样式:
1 .typeadd 2 { 3 float:left;width:6%; 4 } 5 .typeadd:hover 6 { 7 background-color:#ccc; 8 cursor:pointer; 9 }10 .typecut11 {12 float:left;width:6%;13 }14 .typecut:hover15 {16 background-color:#ccc;17 cursor:pointer;18 }19 .contentadd20 {21 float:left;width:6%;22 }23 .contentadd:hover24 {25 background-color:#ccc;26 cursor:pointer;27 }28 .contentcut29 {30 float:left;width:6%;31 }32 .contentcut:hover33 {34 background-color:#ccc;35 cursor:pointer;36 }37 .contentadd_38 {39 float:left;width:6%;40 }41 .contentadd_:hover42 {43 background-color:#ccc;44 cursor:pointer;45 }46 .contentcut_47 {48 float:left;width:6%;49 }50 .contentcut_:hover51 {52 background-color:#ccc;53 cursor:pointer;54 }55 .typename56 {57 float:left;width: 88%;58 }59 .content60 {61 float:left;width: 88%;62 }63 .content_64 {65 float:left;width: 88%;66 }
外链jquery1.7.1另外还有个外链css就不贴出来了
简单的效果图如下