當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript合并网页表格中内容相同的相邻单元格

發布時間：2024/3/24 javascript 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript合并网页表格中内容相同的相邻单元格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

繼續編寫“圳品”信息系統，我們已經“圳品”信息讀取到JavaScript定義的一個中進行按漢語拼音升序作了排序處理。

var p = [[100, "都安縣丙公司", "產品ab", 5, 25, 10],[50, "南丹縣a公司", "產品a", 5, 25, 10],[30, "羅城縣c公司", "產品a", 5, 25, 10],[100, "都安縣乙公司", "產品ac", 5, 25, 10],[50, "南丹縣b公司", "產品a", 5, 25, 11],[50, "南丹縣a公司", "產品b", 5, 25, 10],[30, "羅城縣c公司", "產品b", 5, 25, 10],[50, "南丹縣a公司", "產品c", 5, 25, 10],[100, "都安縣甲公司", "產品ab", 5, 25, 10]];

詳見：

用Javascript對二維數組DIY按漢語拼音的排序方法

現在我們可以將保存在二維數組中的各縣（區）“圳品”信息在表格中顯示出來。示范如下：

為了直觀，我們可以將表格中的來自同一個縣（區）的縣區代碼單元格合并起來，

對于來自同一個企業有多個產品，則將企業名稱單元格合并起來。示范如下：

為了實現這些單元格的合并，我們編寫了一個函數MergeCells(col)來合并表格中指定列內容相同的上面相鄰單元格：

//合并表格中指定列col中內容相同的上下相鄰單元格 //Merge adjacent table cells with the same content function MergeCells(col) {var t = document.getElementById('tabZp');if (!t || !t.rows){d.innerHTML += '<p>未能訪問表格</p>';return;}var cr = t.rows.length;//counts of rowif (cr < 3){d.innerHTML += '<p>表格行數少于3，無需合并</p>';return;}var cc = t.rows[0].cells.length;//counts of columnif (cc==0 || col > cc){d.innerHTML += '<p>表格行數為0或指定列數超出范圍</p>';return;}var i, b, c;b=1;//beginfor (i=2; i < cr; i++){c = t.rows[b].cells[col].innerHTML; //content//發現內容相同的相鄰單元格if (c==t.rows[i].cells[col].innerHTML){//刪除內容相同的相鄰單元格t.rows[i].removeChild(t.rows[i].cells[col]); //調整內容相同的首個單元格的rowSpant.rows[b].cells[col].rowSpan++;}else{//發現內容不相同的相鄰單元格，開始新的單元格合并b = i;}d.innerHTML += "<p>b="+ b + " i=" + i + " c=" + c;} } //MergeCells(col)

思路是：

表格首行（第0行）是表頭，所以從表格第1行開始進行處理，將行號保存在變量b中，向下逐行將第i行第col列單元格的內容與第b行第col列單元格的內容進行對比：
如果兩個單元格內容相同，則用調用removeChild方法刪除第i行第col列單元格，然后將第b行第col列單元格的rowSpan值加1；
如果兩個單元格內容不同，則將變量b保存的行號更新為當前行（第i行），從當前行（第i行）開始新的單元格對比與合并。

完整的示范代碼如下：

<!DOCTYPE html> <html><style>table {border-collapse:collapse;}th,td { border: 1px solid black;}</style> <body><script>var p = [[100, "都安縣丙公司", "產品ab", 5, 25, 10],[50, "南丹縣a公司", "產品a", 5, 25, 10],[30, "羅城縣c公司", "產品a", 5, 25, 10],[100, "都安縣乙公司", "產品ac", 5, 25, 10],[50, "南丹縣b公司", "產品a", 5, 25, 11],[50, "南丹縣a公司", "產品b", 5, 25, 10],[30, "羅城縣c公司", "產品b", 5, 25, 10],[50, "南丹縣a公司", "產品c", 5, 25, 10],[100, "都安縣甲公司", "產品ab", 5, 25, 10]]; function writeTab(i) {document.write('<TABLE id="', i, '" align="center"><TR><TH>序號</TH><TH>縣區代碼</TH><TH>企業名稱</TH><TH>產品名稱</TH><TH>認證狀態</TH><TH>編號</TH><TH>備注</TH></TR>');for (i=0; i < p.length; i++){document.write('<TR><TD>', i+1,'</TD>');for (j=0; j < p[i].length; j++){document.write('<TD>',p[i][j],'</TD>'); }document.write('</TR>');}document.write('</TABLE>'); }// writeTab(i)document.write('<p style="text-align:center;">初始表格</p>'); writeTab('tabZp0');document.write('<p style="text-align:center;">合并后的表格</p>'); writeTab('tabZp');document.write('<div id="debug"></div>');var d = document.getElementById("debug"); d.innerHTML += "Debug:";//Merge adjacent cells with the same content function MergeCells(col) {var t = document.getElementById('tabZp');if (!t || !t.rows){d.innerHTML += '<p>未能訪問表格</p>';return;}var cr = t.rows.length;//counts of rowif (cr < 3){d.innerHTML += '<p>表格行數少于3，無需合并</p>';return;}var cc = t.rows[0].cells.length;//counts of columnif (cc==0 || col > cc){d.innerHTML += '<p>表格行數為0或指定列數超出范圍</p>';return;}var i, b, c;b=1;//beginfor (i=2; i < cr; i++){c = t.rows[b].cells[col].innerHTML; //content//發現內容相同的相鄰單元格if (c==t.rows[i].cells[col].innerHTML){//刪除內容相同的相鄰單元格t.rows[i].removeChild(t.rows[i].cells[col]); //調整內容相同的首個單元格的rowSpant.rows[b].cells[col].rowSpan++;}else{//發現內容不相同的相鄰單元格，開始新的單元格合并b = i;}d.innerHTML += "<p>b="+ b + " i=" + i + " c=" + c;} } //MergeCells(col)MergeCells(3); MergeCells(2); </script></body> </html>

效果如下圖：

需要特別注意的是我們合并表格中多列單元格時的順序，是按照從右到左的順序來進行的，先對企業名稱列的單元格進行對比和合并，再對縣區代碼列的單元格進行對比和合并，避免亂套。

總結

以上是生活随笔為你收集整理的JavaScript合并网页表格中内容相同的相邻单元格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。