最近再做一个table的功能比较复杂，网上搜搜关于table列的添加也不是很多，这里写下关于jquery动态添加行列的情况，先分析下思路：
首先是table行添加，只需要在table后面追加tr、td即可，涉及到顺序插入需要获取编号列，对其排序，获取到当前添加的编号索引，在找到相应的tr在其后面插入即可，这也是我为什么这里用到bootstrap模态框的原因；列添加只需要在每行tr的里面追加th或者td即可。当然涉及到table的删除、选择、编辑、排序将在后面的一篇文章里完善，敬请期待！
1、HTML布局、相关文件引入
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
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
| <body>
<div class="table-box">
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th><span>时间</span></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td>9</td>
<td>人生表一</td>
<td>表一</td>
<td>表一</td>
<td>生表一</td>
<td>人生表</td>
</tr>
<tr>
<td>10</td>
<td>人生表一</td>
<td>生表一</td>
<td>人生表一</td>
<td></td>
<td>表一</td>
</tr>
<tr>
<td>12</td>
<td>人生表一</td>
<td>人生表一</td>
<td></td>
<td>人生表一</td>
<td>人生表一</td>
</tr>
<tr>
<td>16</td>
<td>人生表一</td>
<td>人生表一</td>
<td>人生表一</td>
<td>人生表一</td>
<td>人生表一</td>
</tr>
<tr>
<td>18</td>
<td>单元表</td>
<td>单元表表</td>
<td>单元表</td>
<td>单元表</td>
<td>单元表</td>
</tr>
<tr>
<td>19</td>
<td>人生表一</td>
<td>生表一</td>
<td></td>
<td></td>
<td>表一</td>
</tr>
</tbody>
</table>
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default" id="addrowbtn" data-toggle="modal" data-target="#rowModal">添加行</button>
</div>
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default" id="addcolbtn" data-toggle="modal" data-target="#colModal">添加列</button>
</div>
<div class="modal fade" id="rowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">添加新行</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-time" class="control-label">填写行编号:</label>
<input type="text" class="form-control" id="recipient-time">
</div>
<div class="form-group">
<label for="message-text" class="control-label">描述（可选）:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmrow">确认</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="colModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">添加新列</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-date" class="control-label">填写列头信息:</label>
<input type="text" class="form-control" id="recipient-date">
</div>
<div class="form-group">
<label for="message-text" class="control-label">描述（可选）:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmcol">确认</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
|
需要引入的文件
1
2
3
4
5
| <link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/jquery.table.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
|
2、在script标签写入javascript
首先获取table的行列数，便于后面使用。代码写在$(fuction(){})里,这里说明一下，添加行，添加列，获取table行列数是通过jquery扩展的形式放在jquery.table.js里面。
1
2
3
4
5
| var $table, rowcol, row_num, col_num, allcols;
$table = $(".table");
rowcol = $table.getrowcol();
row_num = rowcol.rows;
col_num = rowcol.cols;
|
模态框确定按钮触发添加行和列函数：
1
2
3
4
5
6
7
8
9
10
11
12
| $("#confirmrow").on("click",function(){
var trlength = $(".table tr:first").find("th").length;
var newtime = $("#recipient-time").val();
allcols = getCols(".table",0);
allcols.shift();
$(".table").addrow($table,allcols,trlength,newtime);
});
$("#confirmcol").on("click",function(){
var newdate = $("#recipient-date").val();
$(".table").addcol($table,row_num,newdate);
});
|
为了顺序插入我们需要创建一个获取列的函数：
1
2
3
4
5
6
7
8
9
10
11
12
| function getCols(selector,curCol){
var allcol = [],
selector = selector || "",
curIndex = curIndex || "";
$(selector + " tr").each(function(index){
var e_row = $(this).children().eq(curIndex);
allcol.push(e_row);
});
allcol = allcol.length > 0 ? allcol : "";
return allcol;
}
|
3、获取table行列数、添加行、添加列在jquery中的扩展
在jquery.table.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
| (function ($) {
$.fn.extend({
getrowcol: function(){
var obj;
this.each(function(){
var row_num = $(this).find("tr").length;
var col_num = $(this).find("td").length / (row_num - 1);
obj = {rows: row_num, cols: col_num};
});
return obj;
},
addrow: function(table,arrcols,trlen,time){
return this.each(function(){
var arr = [];
$(arrcols).each(function(){
arr.push($(this).text());
});
arr.push(time);
arr.sort(function(x,y){
x = parseInt(x);
y = parseInt(y);
if(x<y){
return -1;
}
if(x>y){
return 1;
}
return 0;
});
var index = arr.indexOf(time);
var _html;
for(var i = 1;i < trlen; i++){
_html += "<td></td>";
}
table.find("tr").eq(index).after("<tr><td>"+time+"</td>"+_html+"</tr>");
});
},
addcol: function(table,rownum,newdate){
return this.each(function(){
$("tr:first",this).append("<th>"+newdate+"</th>");
$("tr:gt(0)",this).each(function(){
$(this).append("<td></td>");
});
});
}
});
})(jQuery);
|
查看演示
**更多table强大功能敬请待续…如有不足之处，多多指教！