實現需求
本博客主要實現 合併指定單元格與其上面的一個單元格，即合併上下兩個相鄰的單元格，然後把上個單元格的值作爲合併單元格的值。實現效果如下：
實現思路
- 獲取單元格索引
- 獲取單元格 rowspan（colspan）屬性值
- 修改單元格 rowspan（colspan）屬性值
- 隱藏多餘的單元格
點擊按鈕實現合併
<!DOCTYPE html>
<html>
<head>
<title>向上合併單元格</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--1.11.1版本也是支持的-->
<!--<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
td{
border: 2px solid grey;
}
</style>
</head>
<script type="text/javascript">
var selectedRowId = 0;
var selectedColId = 0;
var selectedVal = "";
$(document).ready(function(){
$("input").blur(function () {
// 獲取當前行的索引
var rowIndex = $(this).parent().parent().index();
// 獲取當前列的索引
var columnIndex = $(this).parent().index();
var val = $(this).val();
//alert("rowIndex=="+rowIndex+" "+"columnIndex="+columnIndex+"內容是"+val);
selectedColId=columnIndex;
selectedRowId=rowIndex;
selectedVal=val;
});
});
function getIndex() {
alert(selectedRowId + "====" + selectedColId + "====" + selectedVal);
}
function mergeup(){ //合併同一列的上一個單元格
var selectedcol = selectedColId;
var selectedrow = selectedRowId;
if(0 == selectedrow) {
alert("沒有選擇單元格 或者 沒有上一行，無法合併");
return false;
}
var startCell = $("#tbl").find("tr").eq(selectedrow+1).find("td").eq(selectedcol);
var s_rowspanVal = startCell.attr("rowspan");
//獲取當前選中單元格的 rowspan
if(typeof(s_rowspanVal) == "undefined"){
startCell.attr("rowspan",1);
s_rowspanVal = startCell.attr("rowspan");
}
for(var row=selectedrow; row>=0; row--){
//上一行是否隱藏，如果是，繼續往上找，否則取出 rowspan 的值
var targetCell = $("#tbl").find("tr").eq(row).find("td").eq(selectedcol);
var displayVal = targetCell.css("display");
var t_rowspanVal = targetCell.attr("rowspan");
//alert("rowspanVal==="+rowspanVal);
if("table-cell" == displayVal){ //table-cell 是單元格默認的 display 值，這裏可以用 none 來判斷也許更準確
//上一行沒有被隱藏，直接合並
if(typeof(t_rowspanVal) == "undefined"){
targetCell.attr("rowspan",1);
t_rowspanVal = targetCell.attr("rowspan");
}
//更改目標單元格的 rowspan 屬性值
targetCell.attr("rowspan",parseInt(t_rowspanVal)+parseInt(s_rowspanVal));
console.log("startCell=="+startCell);
startCell.hide();
startCell = targetCell;
break;
}else {
//上一行被隱藏，繼續循環找上一行的 rowspan
continue;
}
}
//重置全局變量，以免連續點兩次合併出現bug
selectedRowId = 0;
selectedColId = 0;
}
</script>
<body>
<h1>點擊合併，將合併鼠標上一次所在單元格與其上一格</h1>
<input type="button" value="索引" id="getIndex" onclick="getIndex();">
<input type="button" value="合併上一個單元格" id="mergeup" onclick="mergeup();">
<table id="tbl">
<thead>
<tr>
<td><input type="text" value="thead00"></td>
<td><input type="text" value="thead01"></td>
<td><input type="text" value="thead02"></td>
<td><input type="text" value="thead03"></td>
<td><input type="text" value="thead04"></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="tbody00"></td>
<td><input type="text" value="tbody01"></td>
<td><input type="text" value="tbody02"></td>
<td><input type="text" value="tbody03"></td>
<td><input type="text" value="tbody04"></td>
</tr>
<tr>
<td><input type="text" value="tbody10"></td>
<td><input type="text" value="tbody11"></td>
<td><input type="text" value="tbody12"></td>
<td><input type="text" value="tbody13"></td>
<td><input type="text" value="tbody04"></td>
</tr>
<tr>
<td><input type="text" value="tbody20"></td>
<td><input type="text" value="tbody21"></td>
<td><input type="text" value="tbody22"></td>
<td><input type="text" value="tbody23"></td>
<td><input type="text" value="tbody24"></td>
</tr>
<tr>
<td><input type="text" value="tbody30"></td>
<td><input type="text" value="tbody31"></td>
<td><input type="text" value="tbody32"></td>
<td><input type="text" value="tbody33"></td>
<td><input type="text" value="tbody34"></td>
</tr>
</tbody>
</table>
<br/>
<hr>
<h1>雙擊單元格向上合併一格</h1>
<table id="dbl">
<tr>
<td><input type="text" value="00"/></td>
<td><input type="text" value="01"/></td>
<td><input type="text" value="02"/></td>
</tr>
<tr>
<td><input type="text" value="10"/></td>
<td><input type="text" value="11"/></td>
<td><input type="text" value="12"/></td>
</tr>
<tr>
<td><input type="text" value="20"/></td>
<td><input type="text" value="21"/></td>
<td><input type="text" value="22"/></td>
</tr>
<tr>
<td><input type="text" value="30"/></td>
<td><input type="text" value="31"/></td>
<td><input type="text" value="32"/></td>
</tr>
</table>
<script>
//測試 雙擊單元格進行合併
$(function () {
//只選到 td ，在輸入框雙擊也是能觸發這個事件，少寫一個parent()也能正確獲取到單元格索引，但是不好獲取到輸入框的值
$('#dbl tr td input').dblclick(function () {
// 獲取當前行的索引
var rowIndex = $(this).parent().parent().index();
// 獲取當前列的索引
var columnIndex = $(this).parent().index();
var val = $(this).val();
//alert("rowIndex=="+rowIndex+" "+"columnIndex="+columnIndex+"內容是"+val);
var selectedcol = columnIndex;
var selectedrow = rowIndex;
if(0 == selectedrow) {
alert("沒有上一行，無法合併");
return false;
}
var startCell = $("#dbl").find("tr").eq(selectedrow).find("td").eq(selectedcol);
var s_rowspanVal = startCell.attr("rowspan");
//獲取當前選中單元格的 rowspan
if(typeof(s_rowspanVal) == "undefined"){
startCell.attr("rowspan",1);
s_rowspanVal = startCell.attr("rowspan");
}
//alert("s_rowspanVal==="+s_rowspanVal);
for(var row=selectedrow-1; row>=0; row--){
//上一行是否隱藏，如果是，繼續往上找，否則取出 rowspan 的值
var targetCell = $("#dbl").find("tr").eq(row).find("td").eq(selectedcol);
var displayVal = targetCell.css("display");
var t_rowspanVal = targetCell.attr("rowspan");
if("table-cell" == displayVal){ //table-cell 是單元格默認的 display 值，這裏可以用 none 來判斷也許更準確
//上一行沒有被隱藏，直接合並
if(typeof(t_rowspanVal) == "undefined"){
targetCell.attr("rowspan",1);
t_rowspanVal = targetCell.attr("rowspan");
}
//alert("t_rowspanVal==="+t_rowspanVal);
targetCell.attr("rowspan",parseInt(t_rowspanVal)+parseInt(s_rowspanVal));
startCell.hide();
//targetCell = targetCell;
break;
}else {
//上一行被隱藏，繼續循環找上一行的 rowspan
continue;
}
}
});
})
</script>
</body>
</html>
雙擊單元格實現合併
實現方法在上面的代碼中。
思路一樣，有一點點改動