使用Javascript合併單元格

我有谷歌合併+單元格+ Javascript，但沒有找到任何合適的代碼來實現表中的合併單元格。使用Javascript合併單元格

是否有任何指導方針，我可以使用Javascript使MS-WORD表單元格合併功能。

尋找您的建議。

2010-03-04 Hoque

如果你自己可以用JavaScript編寫代碼，它應該很容易，因爲刪除第二個單元格並將第一個單元格增加一個。

2010-03-04 11:17:35 raveren

嗯，我可以做到這一點，當用戶選擇兩個靠近在一起的細胞。但是，當這些單元格不接近時，即用戶選擇第一行/第一列的單元格並選擇另一單元格第二行/第三列，然後嘗試合併時，會發生什麼？這是不可能的合併，對吧？我如何檢測到這種情況？ – Hoque 2010-03-04 11:28:24

你可以通過'nextSibling'或jQuery的選擇器來檢查你的單元格的鄰居。如果有問題的單元格不在同一行中，只需取消操作。 – raveren 2010-03-04 17:44:40

如果我理解正確。
在html中它被稱爲colspan和rowspan。有關使用jQuery的示例代碼，請參見link。

來源

2010-03-04 11:20:02

從鏈接中不清楚。瞭解使用或不使用純JavaScript代碼的技術會更好。 – Hoque 2010-03-04 11:31:17

本示例將在4x4表格中顯示16個單元格，如果您單擊兩個或多個單元格，然後單擊合併按鈕，它會將單元格內容合併到最早的單元格中。做舊的javascript（按照問題標籤），但很容易轉換成jquery。

經過Firefox測試，但應該可以在大多數現代瀏覽器中使用。

這是你想要做的嗎？

<html> 
<head> 
<title>Test Merge</title> 
<style type="text/css"> 
td {border: solid 1px black; background:gray; padding:5px; margin:10px; } 
</style> 
</head> 
<body> 

<table> 
<tr> 
<td id="cell-1-1" onclick="merge(this);">a</td> 
<td id="cell-1-2" onclick="merge(this);">b</td> 
<td id="cell-1-3" onclick="merge(this);">c</td> 
<td id="cell-1-4" onclick="merge(this);">d</td> 
</tr> 
<tr> 
<td id="cell-2-1" onclick="merge(this);">e</td> 
<td id="cell-2-2" onclick="merge(this);">f</td> 
<td id="cell-2-3" onclick="merge(this);">g</td> 
<td id="cell-2-4" onclick="merge(this);">h</td> 
</tr> 
<tr> 
<td id="cell-3-1" onclick="merge(this);">i</td> 
<td id="cell-3-2" onclick="merge(this);">j</td> 
<td id="cell-3-3" onclick="merge(this);">k</td> 
<td id="cell-3-4" onclick="merge(this);">l</td> 
</tr> 
<tr> 
<td id="cell-4-1" onclick="merge(this);">m</td> 
<td id="cell-4-2" onclick="merge(this);">n</td> 
<td id="cell-4-3" onclick="merge(this);">o</td> 
<td id="cell-4-4" onclick="merge(this);">p</td> 
</tr> 
</table> 
<input type="button" id="merge" value="merge" onclick="mergeHighlighted();" /> 

</body> 

</html> 

<script language="javascript" type="text/javascript"> 
    function merge(o) { 
     o.style.backgroundColor = "red";   
    } 

    function mergeHighlighted() { 
     var tds = document.getElementsByTagName("td"); 
     var firstCellId = ""; 
     var mergedCells = ""; 
     for (var i = 0; i < tds.length; i++) { 
      if (tds[i].style.backgroundColor == "red") { 
       mergedCells += tds[i].textContent; 
       if (firstCellId == "") { 
        firstCellId = tds[i].id; 
       } 
       else { 
        tds[i].style.backgroundColor = "gray"; 
        tds[i].style.display = "none"; 
        tds[i].textContent = ""; 
       } 
      } 
     } 
     var firstCell = document.getElementById(firstCellId); 
     firstCell.textContent = mergedCells; 
     firstCell.style.backgroundColor = "gray"; 
    } 
</script>

來源

2010-03-04 13:13:33 amelvin

感謝您的代碼。它在IE8/IE7中不起作用。我沒有在IE6中測試。可能它也不能在IE6中工作，因爲IE不支持「textContent」。此外，在Firefox中，當用戶選擇兩個相隔很遠的單元格時，合併會產生不需要的結果。但是我已經投票贊成你的努力。 – Hoque 2010-03-05 00:18:28

您可以使用我編寫的用於處理複雜表格的獨立JavaScript庫Table.js。您可以使用這樣的事情：

var mytable = new Table(document.getElementById('mytable')), 
    cell1 = document.getElementById('cell1'), 
    cell2 = document.getElementById('cell2'); 
mytable.merge([cell1, cell2], function(colspan, rowspan, newcell, oldcell){ 
    // colspan is the future value of the "colSpan" attribute of newcell 
    // rowspan is the future value of the "rowSpan" attribute of newcell 
    // newcell is the cell that is kept 
    // oldcell is the cell that will be removed 
    // Do what you want here 
});

該函數的第一個參數是HTMLTableCellElement（<TD>或<TH>元素）或NodeList的Array。第二個參數是可選的，並且是在兩個單元格合併在一起時調用的回調函數。

默認情況下，當調用<TableObject>.merge()時，Table.js被限制爲50次合併。你可以用

window.Table.maxIteration = 100;

改變這個你也可以用類似的功能<TableObject>.mergeHorizontal(cells, callback)和<TableObject>.mergeVertical(cells, callback)。

來源

2017-10-04 18:37:25 JDMCreator

使用Javascript合併單元格

回答

相關問題