Как разделить ячейки таблицы.
Я создал HTML-таблицу.
Выбор тд путем перетаскивания.
Слияние тд, выделенных цветом в каждом тр.
До слияния ячеек я все делал успешно. Теперь я застрял в расщеплении(unmerge) этих слияний td. Может ли кто-нибудь дать мне идею, как я могу разделить объединенные ячейки при нажатии кнопки splitcells(button) с помощью Javascript или jquery.
Спасибо.
Что я уже пробовал:
<table cellspacing="0" cellpadding="0" border="0"> <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> <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> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table> <input id="btMerge" type="button" value="Merge cells" /> <input id="btSplit" type="button" value="Split cells" />
CSS: table { width: 80%; } table td { border: 1px solid #97B4D1; text-align: center; cursor: pointer; }
JavaScript: var StartTD = null; var StartIndex = null; var EndTD = null; var EndIndex = null; $().ready(function() { $("td").unbind("mousedown").bind("mousedown", function() { $("table td").css("background-color", ""); StartTD = $(this); var y = $(this).index(); var x = $(this).parent().index(); StartIndex = { x: x, y: y }; }); $("td").unbind("mouseup").bind("mouseup", function() { EndTD = $(this); var y = $(this).index(); var x = $(this).parent().index(); EndIndex = { x: x, y: y }; SelectTD(StartIndex, EndIndex, "green"); }); $("#btMerge").click(function() { MergeCell(StartIndex, EndIndex); MergeCell(EndIndex, StartIndex); }); }); function SelectTD(StartIndex, EndIndex, Color) { var MinX = null; var MaxX = null; var MinY = null; var MaxY = null; if (StartIndex.x < EndIndex.x) { MinX = StartIndex.x; MaxX = EndIndex.x; } else { MinX = EndIndex.x; MaxX = StartIndex.x; }; if (StartIndex.y < EndIndex.y) { MinY = StartIndex.y; MaxY = EndIndex.y; } else { MinY = EndIndex.y; MaxY = StartIndex.y; }; StartIndex = { x: MinX, y: MinY }; EndIndex = { x: MaxX, y: MaxY }; for (var i = MinX; i <= MaxX; i++) { for (var j = MinY; j <= MaxY; j++) { var SelectTR = $("table tr").eq(i); $("td", SelectTR).eq(j).css("background-color", Color); } } } function MergeCell(StartIndex, EndIndex) { var Colspan = null; var Rowspan = null; console.log(StartIndex, EndIndex) Rowspan = EndIndex.x - StartIndex.x + 1; Colspan = EndIndex.y - StartIndex.y + 1; var IndexTR = $("table tr").eq(StartIndex.x); $("td", IndexTR).eq(StartIndex.y).attr("colspan", Colspan).attr("rowspan", Rowspan); for (var i = StartIndex.x; i <= EndIndex.x; i++) { for (var j = StartIndex.y; j <= EndIndex.y; j++) { if (i == StartIndex.x && j == StartIndex.y) continue; var SelectTR = $("table tr").eq(i); $("td", SelectTR).eq(j).hide(); } } }