java为table添加一行_Js实现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 &nbsp&nbsp45

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 var formvalue = "";80 var flag = 1;81 var index = 1;82 var firstCell = "";83 var secondCell = "";84 var thirdCell = "";85 var fourthCell = "";86

87 $(function() {88 //初始化第一行

89 firstCell = $("#row0 td:eq(0)").html();90 secondCell = $("#row0 td:eq(1)").html();91 thirdCell = $("#row0 td:eq(2)").html();92 fourthCell = $("#row0 td:eq(3)").html();93 });94

95 //-----------------新增一行-----------start---------------

96

97 function insertNewRow() {98 //获取表格有多少行

99 var rowLength = $("#orderTable tr").length;100 //这里的rowId就是row加上标志位的组合。是每新增一行的tr的id。

101 var rowId = "row" +flag;102

103 //每次往下标为flag+1的下面添加tr,因为append是往标签内追加。所以用 after

104 var insertStr = "

" + "" + firstCell + "" + "" + secondCell + "" + "" + thirdCell + "" + "" + fourthCell + "" + ""; + "";105 //这里的行数减2，是因为要减去底部的一行和顶部的一行，剩下的为开始要插入行的索引

106 $("#orderTable tr:eq(" + (rowLength - 2) + ")").after(insertStr); //将新拼接的一行插入到当前行的下面107 //为新添加的行里面的控件添加新的id属性。

108 $("#" + rowId + "td:eq(0)").children().eq(0).attr("id", "UrbanDepNo" +flag);109 $("#" + rowId + "td:eq(1)").children().eq(0).attr("id", "LocNo" +flag);110 $("#" + rowId + "td:eq(2)").children().eq(0).attr("id", "RoadSectionName" +flag);111 $("#" + rowId + "td:eq(3)").children().eq(0).attr("id", "StStartRoad" +flag);112 $("#" + rowId + "td:eq(3)").children().eq(1).attr("id", "EndRoad" +flag);113 //每插入一行，flag自增一次

114 flag++;115 }116

117 //-----------------删除一行，根据行ID删除-start--------

118

119 function deleteSelectedRow(rowID) {120 if (confirm("确定删除该行吗？")) {121 $("#" +rowID).remove();122 }123 }124 //-----------------获取表单中的值----start--------------

125

126 function GetValue() {127 var value = "";128 $("#orderTable tr").each(function(i) {129 if (i >= 1) {130 $(this).children().each(function(j) {131 if ($("#orderTable tr").eq(i).children().length - 1 !=j) {132 value += $(this).children().eq(0).val() + "," //获取每个单元格里的第一个控件的值

133 if ($(this).children().length > 1) {134 value += $(this).children().eq(1).val() + "," //如果单元格里有两个控件，获取第二个控件的值

135 }136 }137 });138 value = value.substr(0, value.length - 1) + "#"; //每个单元格的数据以“，”分割，每行数据以“#”号分割

139 }140 });141 value = value.substr(0, value.length);142 ReceiveValue(value);143 //$("#formvalue").val(value);144 //$("formvalue").submit();

145 }146 //-------------------接收表单中的值-----------------------------

147

148 function ReceiveValue(str) {149 var Str = str.split('#');150 if (Str[0] != "") {151 for (var i = 0; i < Str.length - 1; i++) {152 var value = Str[i].split(',');153 var dept = value[0];154 var street = value[1]155 var section = value[2];156 var Broad = value[3];157 var Eroad = value[4];158 insertTable(dept, street, section, Broad, Eroad);159 $("input[type='text']").val("");160 $("select[name='UrbanDepNo']").val("0");161 }162 }163 }164

165 //---------------将表单中的数据添加到新表中---------------------

166

167 function insertTable(dept, street, section, Broad, Eroad) {168 var department = "";169 switch(dept) {170 case "1":171 department = "三林城管署";172 break;173 case "2":174 department = "港城城管署";175 break;176 case "3":177 department = "惠南城管署";178 break;179 case "4":180 department = "金桥城管署";181 break;182 case "5":183 department = "陆家嘴城管办";184 break;185 case "6":186 department = "川沙城管署";187 break;188 default:189 break;190 }191

192 //将接收到数据添加到新表TableInfo中。

193 $('#TableInfo').append("

" + department + " " + street + "" + section + " " + Broad + "-" + Eroad + " 删 除");194 index++;195 }196

197 //----------新表中的删除方法-----------

198

199 function deltr(index) {200 if (confirm("确定删除吗?")) {201 $("tr[id='" + index + "']").remove();202 }203 }204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220