实现需求
本博客主要实现 合并指定单元格与其上面的一个单元格，即合并上下两个相邻的单元格，然后把上个单元格的值作为合并单元格的值。实现效果如下：
实现思路
- 获取单元格索引
- 获取单元格 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>
双击单元格实现合并
实现方法在上面的代码中。
思路一样，有一点点改动