js合併單元格
合併單元格的狀況，在開發中仍是比較多見的，如下僅介紹合併行的狀況。javascript
原來的table效果css
效果以下：html
代碼以下：java
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<title></title>
<script src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>公司</th>
<th>事項</th>
<th>年度</th>
</tr>
</thead>
<tbody>
<tr>
<td>XX公司</td>
<td>安全事故一</td>
<td>2013</td>
</tr>
<tr>
<td>XX公司</td>
<td>安全事故二</td>
<td>2014</td>
</tr>
<tr>
<td>XX公司</td>
<td>安全事故三</td>
<td>2015</td>
</tr>
<tr>
<td>XX公司</td>
<td>安全事故四</td>
<td>2016</td>
</tr>
<tr>
<td>QQ公司</td>
<td>安全事故</td>
<td>2013</td>
</tr>
<tr>
<td>QQ公司</td>
<td>安全事故一</td>
<td>2013</td>
</tr>
<tr>
<td>QQ公司</td>
<td>安全事故二</td>
<td>2014</td>
</tr>
<tr>
<td>QQ公司</td>
<td>安全事故三</td>
<td>2015</td>
</tr>
<tr>
<td>QQ公司</td>
<td>安全事故四</td>
<td>2016</td>
</tr>
<tr>
<td>MM公司</td>
<td>安全事故一</td>
<td>2013</td>
</tr>
<tr>
<td>MM公司</td>
<td>安全事故二</td>
<td>2014</td>
</tr>
<tr>
<td>MM公司</td>
<td>安全事故三</td>
<td>2015</td>
</tr>
<tr>
<td>MM公司</td>
<td>安全事故四</td>
<td>2016</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
MergeCells(0);
});
//合併單元格函數(cellIndex 表明合併td的索引)
function MergeCells(cellIndex)
{
var $tr = $("table tbody tr");
var companyList = new Array();
//得到全部公司的名稱
$.each($tr, function (index, ele) {
var text = $(ele).find("td").eq(cellIndex).text();
companyList.push(text);
});
//公司名稱分組統計
var hist = {};
companyList.map(function (a) {
if (a in hist)
hist[a]++;
else
hist[a] = 1;
});
//記錄操做表格信息（起始TR索引，結束TR索引，合併行數，公司名稱）
var list = new Array();
var temp = "";
$.each(companyList, function (index, ele) {
var obj = new Object();
if (temp != ele) {
temp = ele;
obj.FirstIndex = index;
obj.RowSpan = hist[ele];
obj.EndIndex = index + obj.RowSpan - 1;
obj.Name = ele;
list.push(obj);
}
});
//合併表格
$.each(list, function (index, ele) {
//設置rowspan
$("table tbody tr:eq(" + ele.FirstIndex + ") td:eq("+cellIndex+")").attr("rowspan", ele.RowSpan);
//清除多餘行數
var $removeTr = $("table tbody tr:gt(" + ele.FirstIndex + "):lt(" + ele.EndIndex + ")");
$.each($removeTr, function (removeIndex, removeEle) {
if ($(removeEle).children("td:eq(" + cellIndex + ")").text() == ele.Name) {
$(removeEle).children("td:eq(" + cellIndex + ")").remove();
}
});
});
}
</script>
</body>
</html>
注意點：jquery
要合併的單元格是通過此單元格的字段排序過的，保證合併單元格內的內容是緊挨着的。bootstrap
相關文章
- 1. js 合併表格單元格
- 2. js合併單元格（相同）
- 3. qt 合併單元格 tablewidget 合併單元格
- 4. webform gridview合併單元格
- 5. jquery單元格合併
- 6. Apache POI 合併單元格
- 7. Html Table 合併單元格
- 8. execl合併單元格
- 9. table 合併單元格
- 10. element.ui合併單元格
- 更多相關文章...
- • PHP NULL 合併運算符 - PHP 7 新特性
- • XSD 複合元素 - XML Schema 教程
- • 算法總結-歸併排序
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js 合併表格單元格
- 2. js合併單元格（相同）
- 3. qt 合併單元格 tablewidget 合併單元格
- 4. webform gridview合併單元格
- 5. jquery單元格合併
- 6. Apache POI 合併單元格
- 7. Html Table 合併單元格
- 8. execl合併單元格
- 9. table 合併單元格
- 10. element.ui合併單元格