Javascript 为单元格设置 colspan/rowspan
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14639561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set colspan/rowspan for a cell
提问by warvariuc
I have a table and I want to change colspan/rowspanproperty of a cell on runtime. Here is an example:
我有一个表格，我想在运行时更改单元格的colspan/rowspan属性。下面是一个例子：
<html>
<head>
<script type="text/javascript">
function setColSpan() {
document.getElementById('myTable').rows[0].cells[0].colSpan = 2
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" value="Change colspan">
</form>
</body>
</html>
My problem is that the cells shift. Am I supposed to remove the cells over which the cell in question spans?
我的问题是细胞发生了变化。我应该删除有问题的单元格跨越的单元格吗？
I can I do without removing?
我可以不删除吗？
I want to implement a simple spreadsheet. For now I managed to be able to select a rectangular range of cells and show a menu with a "Merge selected cells" option. I would like to be able to "unmerge" cells, so it would be good to span cells without having to remove other cells.
我想实现一个简单的电子表格。现在我设法能够选择一个矩形范围的单元格并显示一个带有“合并选定的单元格”选项的菜单。我希望能够“取消合并”单元格，因此最好跨越单元格而不必删除其他单元格。
回答by 999k
I think you need to delete the cell. Check with following code. What i did was removed the entire row and added new row with new column span
我认为您需要删除该单元格。用下面的代码检查。我所做的是删除整行并添加具有新列跨度的新行
function setColSpan() {
var table = document.getElementById('myTable');
table.deleteRow(0);
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML= "cell 1"
cell.colSpan = 2
}
回答by spinn
The cells shift because that's what you're telling it to do. You're defining a table like this:
细胞会发生变化，因为这就是您要它做的事情。您正在定义这样的表：
<tr>
<td colspan="2">cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
So the shift you're seeing is what I would expect.
所以你看到的转变正是我所期望的。
If you want to merge cells, you would have to take the contents of all the merged cells, concat them into a single cell, and remove the rest. For the trivial example, it'd go like this:
如果要合并单元格，则必须获取所有合并单元格的内容，将它们合并为一个单元格，然后删除其余单元格。对于这个简单的例子，它会是这样的：
function setColSpan() {
var myTable = document.getElementById('myTable');
var cell2html = myTable.rows[0].cells[1].innerHTML;
myTable.rows[0].deleteCell(1);
myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html;
myTable.rows[0].cells[0].colSpan = 2;
}
However a more robust solution is...kind of complicated. Especially if you want the ability to unmerge. You'd have to preserve the information of the old cell structure somehow...possibly with putting something like <span class="oldCell">cell 2</span>around merged data? And then checking for the existence of "oldCell" spans when unmerging? But then you would have to preserve that information through user edits. And figure out what that means for merging across rows and columns. And also figure out what that means for overlapping merges.
然而，更强大的解决方案是......有点复杂。特别是如果您想要取消合并的能力。您必须以某种方式保留旧单元格结构的信息......可能会<span class="oldCell">cell 2</span>在合并数据周围放置类似的东西？然后在取消合并时检查“oldCell”跨度的存在？但是，您必须通过用户编辑来保留该信息。并弄清楚这对跨行和跨列合并意味着什么。还要弄清楚这对重叠合并意味着什么。
