table合并行列，以及拆分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .select { background-color: gray; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } table { border-collapse: collapse; border: none; } td { border: solid #000 1px; border-color: Black; empty-cells: show; } </style> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("table tbody tr td").click(function () { $(this).toggleClass("select"); }); var getColCount = function () { var colspan = 0; //获取选择的实际列数，包括合并的列 $(".select:first").parent().find(".select").each(function () { if ($(this).attr("colspan") == undefined) { colspan++; } else { colspan += parseInt($(this).attr("colspan")); } }); return colspan; } var getRowCount = function () { var rowspan = 0; //获取选择的实际行数，包括合并的行 var yIndex = $(".select:first").parent().index(); $("table tbody tr").has(".select").each(function () { if ($(this).index() >= yIndex) { var tr_first_checkd_td = $(this).find(".select:first"); if (tr_first_checkd_td.attr("rowspan") == undefined) { rowspan++; yIndex++; } else { rowspan += parseInt(tr_first_checkd_td.attr("rowspan")); yIndex += parseInt(tr_first_checkd_td.attr("rowspan")); } } }); return rowspan; } $("#merge").click(function () { if (canMerge()) { var colspan = getColCount(); var rowspan = getRowCount(); if (colspan != 1) { $(".select:first").attr({ colspan: colspan }); } if (rowspan != 1) { $(".select:first").attr({ rowspan: rowspan }); } $(".select:gt(0)").remove(); $(".select").removeClass("select"); } else { alert("不能合并"); } }); var canMerge1 = function () { var rowCount = getRowCount(); var colCount = getColCount(); var totalCount = 0; $(".select").each(function () { var rowspan = 1; var colspan = 1; if ($(this).attr("rowspan") != undefined) { rowspan = parseInt($(this).attr("rowspan")); } if ($(this).attr("colspan") != undefined) { colspan = parseInt($(this).attr("colspan")); } totalCount += (rowspan * colspan); }); return totalCount == rowCount * colCount; }; var canMerge = function () { //判断是否能合并， //一，选择的td个数等于第一个和最后一个选择的td构成的方块的个数， //二，所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内 var first_X_Index = $(".select:first").index(); var first_Y_Index = $(".select:first").parent().index(); var last_X_Index = $(".select:last").index(); var last_Y_index = $(".select:last").parent().index(); var count = (last_X_Index - first_X_Index + 1) * (last_Y_index - first_Y_Index + 1); var selectCount = $(".select").size(); //选择的td个数等于第一个和最后一个选择的td构成的方块的个数 var countEQ = count == selectCount; //所有选择的td的x和y轴的index都在第一个最后一个选中的td的index范围内 var inRange = true; for (var i = 0; i < $(".select").size(); i++) { var x_index = $(".select").eq(i).index(); var y_index = $(".select").eq(i).parent().index(); if (x_index < first_X_Index || x_index > last_X_Index) { inRange = false; break; } else if (y_index < first_Y_Index || y_index > last_Y_index) { inRange = false; break; } } //return inRange && countEQ; return true; }; var getMin = function (colIndexs) { var temp = 0; for (var i = 0; i < colIndexs.length; i++) { if (i == 0) { temp = colIndexs[i]; } else { if (colIndexs[i] < temp) { temp = colIndexs[i]; } } } } $("#split").click(function () { //先补齐colspan,再补齐rowspan,最后删除选中的colspan和rowspan $("table tr .select[colspan]").each(function () { var colspan = parseInt($(this).attr("colspan")); while (colspan > 1) { var td = $("<td></td>"); td.click(function () { $(this).toggleClass("select"); }); $(this).after(td); colspan--; } }); $("table tr .select[rowspan]").each(function () { var index = $(this).index() - 1; var trIndex = $(this).parent().index() + 1; var rowspan = parseInt($(this).attr("rowspan")); if ($(this).attr("colspan") == undefined) { while (rowspan > 1) { var td = $("<td></td>"); td.click(function () { $(this).toggleClass("select"); }); $("table tr").eq(trIndex).find("td").eq(index).after(td); rowspan--; trIndex++; } } else { var colspan = parseInt($(this).attr("colspan")); while (rowspan > 1) { while (colspan > 0) { var td = $("<td></td>"); td.click(function () { $(this).toggleClass("select"); }); $("table tr").eq(trIndex).find("td").eq(index).after(td); colspan--; } rowspan--; trIndex++; } } }); $(".select[rowspan]").removeAttr("rowspan"); $(".select[colspan]").removeAttr("colspan"); $(".select").removeClass("select"); }); $(".align").click(function () { var textAlign = $(this).attr("gh-align"); $(".select").css("text-align", textAlign); $(".select").removeClass("select"); }); $("#create").click(function () { $("table tbody tr").remove(); var j = 1; while (j < 20) { var i = 1; var tr = $("<tr></tr>"); while (i < 20) { var td = $("<td>" + j + "." + i + "</td>"); td.click(function (event) { if (event.ctrlKey == 1) { alert("ctrl"); } $(this).toggleClass("select"); }); tr.append(td); i++; } $("table").append(tr); j++; }; }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div class="tool"> <input type="button" value="新建" id="create" /> <input type="button" value="合并" id="merge" /> <input type="button" value="拆分" id="split" /> <input type="button" value="左对齐" class="align" gh-align="left" /> <input type="button" value="居中" class="align" gh-align="center" /> <input type="button" value="右对齐" class="align" gh-align="right" /> </div> <div class="body"> <table border="1" style=" 100%;"> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr> <tr> <td> 9 </td> <td> 10 </td> <td> 11 </td> <td> 12 </td> </tr> <tr> <td> 13 </td> <td> 14 </td> <td> 15 </td> <td> 16 </td> </tr> </table> </div> </div> </form> </body> </html>
程序员的基础教程：菜鸟程序员