自定義的單元格合併
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#TableTemp").html($("#Table1").html());
});
function test() {
$("#Table1").html($("#TableTemp").html());
var tempval = "";
var $checkedBoxes = $(":checkbox[name='chk']:checked");
if ($checkedBoxes.length <= 1) {
alert("至少應該選擇兩列以上才能合併!");
return;
}
var mergeCols = "";
$checkedBoxes.each(function () {
if (tempval != "") {
if (Math.abs(parseInt(tempval) - parseInt($(this).val())) != 1) {
alert("選中的必須是相鄰的列！");
tempval = "-1";
return false;
}
}
tempval = $(this).val();
mergeCols += $(this).val() + ",";
});
if (tempval == "-1") {
return;
}
mergeCols = mergeCols.substring(0, mergeCols.length - 1);
var arr = mergeCols.split(",");
var startTd = parseInt(arr[0]);
var endTd = parseInt(arr[1]);
$("#Table1>tbody>tr").each(function () {
var tempHtml = "";
$(this).find("td").each(function (index) {
if (arr.in_array(index + "")) {
tempHtml += $(this).html();
}
});
$(this).find("td:eq(" + startTd + ")").attr("colspan", arr.length).html(tempHtml);
$(this).find("td").each(function (index) {
if (index!=startTd && arr.in_array(index + "")) {
$(this).remove();
}
});
});
}
Array.prototype.in_array = function (e) {
for (i = 0; i < this.length && this[i] != e; i++);
return !(i == this.length);
}
</script>
</head>
<body>
<input type="checkbox" name="chk" value="0" />1
<input type="checkbox" name="chk" value="1" />2
<input type="checkbox" name="chk" value="2" />3
<input type="checkbox" name="chk" value="3" />4
<input type="checkbox" name="chk" value="4" />5<br />
<input type="button" value="合併" onclick="test()" />
<table id="TableTemp" style="display:none;"></table>
<table border="1 " style="width: 80%" id="Table1">
<thead>
<tr style="background-color:#E3EEF2;" ><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</tbody>
</table>
</body>
</html>
相關文章
- el-table自定義合併單元格後，單元格錯亂的問題
- js 表格合併單元格JS
- 表格td單元格合併
- vue表格合併單元格Vue
- EasyExcel-合併單元格Excel
- excel合併的單元格重新填充Excel
- Element-plus 合併單元格
- element中表格合併單元格
- Bootstrap-table 合併相同單元格boot
- elementui——表格的相同內容單元格合併UI
- vxe-table 自定義單元格樣式
- 記錄vxe-table合併單元格
- postgresql高階應用之合併單元格SQL
- 使用VUE元件建立SpreadJS自定義單元格(二)Vue元件JS
- 使用VUE元件建立SpreadJS自定義單元格(一)Vue元件JS
- JavaScript合併表格中的內容相同的單元格JavaScript
- elementui表格動態資料單元格合併UI
- js實現table合併相同列單元格JS
- devexpress report 合併列具有重複值的單元格devExpress
- 【java】Aspose.Words 合併單元格2種情況（橫向合併，縱向合併）Java
- NPOI擴充套件--判斷指定單元格是否為合併單元格和輸出該單元格的行列跨度(維度)套件
- table表格單元格橫向和屬性合併
- table 表格單元格橫向與縱向合併
- 關於HTML表格合併單元格的靈魂拷問HTML
- Java Servlet 實現合併多單元格匯出ExcelJavaServletExcel
- 【C#】【DevExpress】自定義單元格右鍵選單，去除單元格編輯時，載入系統的預設選單C#devExpress
- 快速查詢EXCEL整個工作表中的合併單元格Excel
- excel合併單元格快捷鍵 excel多個表格內容合併到一起Excel
- 效率爆表！EasyExcel合併單元格這樣實現才是yydsExcel
- 玩電腦的豈能不知道excel怎麼合併單元格？Excel
- springboot-實現excle檔案匯出的單元格相同內容合併Spring Boot
- JAVA使用poi匯出Excel，合併單元格，設定自動列寬JavaExcel
- Element-Plus表格：Table自定義合併行資料的最佳實踐
- 自定義部落格園部落格的背景圖片
- Excel/CSV 匯入匯出庫，支援大檔案，樣式設定，單元格合併Excel
- Python如何自定義元類Python
- python中socket+threading的自定義併發Pythonthread
- 分割單元格
- 併發程式設計：自定義併發類：自定義非同步流（釋出與訂閱）程式設計非同步