自定義的單元格合併
<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自定義合併單元格後，單元格錯亂的問題
- Html合併單元格HTML
- vue表格合併單元格Vue
- EasyExcel-合併單元格Excel
- js 表格合併單元格JS
- Html Table 合併單元格HTML
- GridView合併單元格View
- excel合併的單元格重新填充Excel
- PowerBuilder---合併相同單元格UI
- Bootstrap-table 合併相同單元格boot
- Excel合併單元格的兩種簡單方法Excel
- elementui——表格的相同內容單元格合併UI
- Excel合併單元格資料的方法教程Excel
- postgresql高階應用之合併單元格SQL
- td單元格合併程式碼例項
- JavaScript合併表格中的內容相同的單元格JavaScript
- elementui表格動態資料單元格合併UI
- js實現table合併相同列單元格JS
- table表格單元格合併程式碼例項
- JS動態生成表格後 合併單元格JS
- NPOI擴充套件--判斷指定單元格是否為合併單元格和輸出該單元格的行列跨度(維度)套件
- table表格單元格橫向和屬性合併
- 【專案實戰】---EasyUI DataGrid單元格合併UI
- 關於HTML表格合併單元格的靈魂拷問HTML
- Java Servlet 實現合併多單元格匯出ExcelJavaServletExcel
- 使用VUE元件建立SpreadJS自定義單元格(二)Vue元件JS
- 使用VUE元件建立SpreadJS自定義單元格(一)Vue元件JS
- 使用jquery合併表格中相同文字的相鄰單元格jQuery
- excel合併單元格快捷鍵 excel多個表格內容合併到一起Excel
- js 合併單元格的方法（使用直接呼叫資料時排列好的）JS
- 玩電腦的豈能不知道excel怎麼合併單元格？Excel
- table表格單元格橫向和屬性合併程式碼例項
- Excel應用技巧：不規則合併單元格之批量填充序列Excel
- JAVA使用poi匯出Excel，合併單元格，設定自動列寬JavaExcel
- Unity網格合併_材質合併[轉]Unity
- Excel/CSV 匯入匯出庫，支援大檔案，樣式設定，單元格合併Excel
- [轉帖]DataGrid顯示雙層表頭,即可實現合併單元格問題
- 自定義部落格園部落格的背景圖片