How corectlly merge cell in table with button
How to prevent that, when selected merged cells avoid errors of the merger. I do not speak English very well
thanks
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
table{width: 80%;}
table td{border: 1px solid #97B4D1;text-align: center;cursor:pointer;}
</style>
<script type="text/javascript">
var StartTD = null;
var StartIndex = null;
var EndTD = null;
var EndIndex = null;
$(this).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;
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();
}
}
}
</script>
</head>
<body>
<input id="btMerge" type="button" value="Merge cells"/>
<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>
</body>
</html>