是否有一种方法可以使用javascript仅合并表中的特定列_Javascript_Html_Css

是否有一种方法可以使用javascript仅合并表中的特定列

javascript html css

是否有一种方法可以使用javascript仅合并表中的特定列,javascript,html,css,Javascript,Html,Css,这是我的要求。 1）首先我们应该比较前两行，第一列是重复的，然后应该合并。2）我想合并前两列和后两列的列，只有第一列相同，如果不相同，就不应该合并3）然后颜色应该是白色和灰色，如果同一行是重复的，那么它应该与父行的颜色相同此处列已合并，表颜色为白色和灰色，如果相同颜色重复，则应重复该颜色 <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; }

这是我的要求。 1）首先我们应该比较前两行，第一列是重复的，然后应该合并。2）我想合并前两列和后两列的列，只有第一列相同，如果不相同，就不应该合并3）然后颜色应该是白色和灰色，如果同一行是重复的，那么它应该与父行的颜色相同

此处列已合并，表颜色为白色和灰色，如果相同颜色重复，则应重复该颜色

<style>
   table {
font-family: arial, sans-serif;
border-collapse: collapse;
 width: 100%;
  }

th {
background: #a9a9a9;
 }

 td,
 th {
border: 1px solid black;
text-align: center;
padding: 8px;
font-family: monospace;
font-size: 17px;
}

.dark {
background-color: #dddddd;
  }
    </style>
    <body onload="myFunction()">
      <table>
      <thead>
      <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    <th>Col4</th>
    <th>Col5</th>
     <th>Col6</th>
     <th>Col7</th>
     <th>Col8</th>
     <th>Col9</th>
     </tr>
    </thead>
    <tbody>
     <tr>
     <td>Alfreds Futterkiste</td>
     <td>Maria Anders</td>
    <td>Germanyindgo</td>
    <td>1</td>
    <td>2</td>
    <td>a</td>
    <td>aa</td>
    <td>aaa</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>1</td>
    <td>2</td>
    <td>a</td>
    <td>aa</td>
    <td>aaa</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>1</td>
    <td>2</td>
    <td>b</td>
    <td>bb</td>
    <td>bbb</td>
    <td>bbbb</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Francisco Chang</td>
    <td>Austria</td>
    <td>1</td>
    <td>2</td>
    <td>c</td>
    <td>cc</td>
    <td>ccc</td>
    <td>cccc</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>1</td>
    <td>2</td>
            <td>d</td>
            <td>dd</td>
            <td>ddd</td>
            <td>dddd</td>

  </tr>
      <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>1</td>
    <td>2</td>
            <td>e</td>
    <td>ee</td>
    <td>eee</td>
    <td>eeee</td>
    </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti 1</td>
    <td>Giovanni Rovelli 1</td>
    <td>Italy</td>
    <td>1</td>
    <td>2</td>
    <td>f</td>
    <td>ff</td>
    <td>fff</td>
     <td>ffff</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti 1</td>
    <td>Giovanni Rovelli 2</td>
    <td>Italy</td>
    <td>1</td>
    <td>2</td>
    <td>f</td>
    <td>ff</td>
    <td>fff</td>
     <td>ffff</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti 3</td>
    <td>Giovanni Rovelli 3</td>
    <td>Italy</td>
    <td>1</td>
    <td>2</td>
    <td>f</td>
    <td>ff</td>
    <td>fff</td>
    <td>ffff</td>
  </tr>
</tbody>
     </table>
 </body>
 <script>
function myFunction() {
    const previousRow = {};
      const colsChanged = {};
     let leftMerged = false;
    let dark = false;

         Array.from(document.querySelectorAll('tbody tr')).forEach((tr, rowIdx) => {
       Array.from(tr.children).forEach((td, colIdx) => {
  if (rowIdx > 0 && (colIdx === 0 || leftMerged) && 
      previousRow[colIdx].text === td.innerText) {
    previousRow[colIdx].elem.setAttribute('rowspan', 
    ++previousRow[colIdx].span);
    colsChanged[colIdx] = false;
    td.remove();
    if (colIdx === 0) {
      leftMerged = true;
    }
  } else {
    previousRow[colIdx] = { span: 1, text: td.innerText, elem: td, dark };
    colsChanged[colIdx] = true;
  }
});
const rowChanged = Object.values(colsChanged).every(Boolean);
dark = rowChanged && rowIdx > 0 ? !dark : dark;
if (dark) {
  tr.classList.add('dark');
}
leftMerged = false;
   });
  }

表格{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
th{
背景：#A9A9；
}
运输署，
th{
边框：1px纯黑；
文本对齐：居中；
填充：8px；
字体系列：monospace；
字号：17px；
}
.黑暗{
背景色：#dddddd；
}


单位
接触
国家
可乐
可乐
可乐6
可乐
可乐
可乐
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国因戈
1.
2.
A.
aa
aaa
aaaa
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
1.
2.
A.
aa
aaa
aaaa
莫特祖马商业中心
张锦松
墨西哥
1.
2.
B
bb
bbb
bbbb
恩斯特·汉德尔
张锦松
奥地利
1.
2.
C
复写的副本
ccc
中交
恩斯特·汉德尔
海伦·贝内特
英国
1.
2.
D
dd
ddd
dddd
笑巴克斯酒窖
田纳西
加拿大
1.
2.
E
ee
eee
eeee
Magazzini Alimentari Riuniti 1
乔瓦尼·罗维利1号
意大利
1.
2.
F
ff
fff
ffff
Magazzini Alimentari Riuniti 1
乔瓦尼·罗维利2号
意大利
1.
2.
F
ff
fff
ffff
Magazzini Alimentari Riuniti 3
乔瓦尼·罗维利3
意大利
1.
2.
F
ff
fff
ffff

您可以通过添加一个数组来保存要合并的列的索引：

const colsToMerge = [0, 1, 7, 8];

然后将第一个

if

更改为同时检查列索引是否在数组中：

if (rowIdx > 0 && (colIdx === 0 || leftMerged) &&
    previousRow[colIdx].text === td.innerText &&
    colsToMerge.includes(colIdx))

这样，只有列0、1、7和8会合并，如果有相邻的单元格

函数myFunction（）{
const previousRow={}；
const colsChanged={}；
const colsToMerge=[0,1,7,8]；
设leftMerged=false；
让黑暗=虚假；
Array.from（document.querySelectorAll（'tbody tr'））.forEach（（tr，rowIdx）=>{
数组.from（tr.children）.forEach（（td，colIdx）=>{
如果（rowIdx>0&（colIdx==0 | | leftMerged）&&previousRow[colIdx].text==td.innerText&&colsToMerge.includes（colIdx））{
上一行[colIdx].elem.setAttribute（'rowspan'，++上一行[colIdx].span）；
colsChanged[colIdx]=假；
td.删除（）；
如果（colIdx==0）{
leftMerged=true；
}
}否则{
上一行[colIdx]={span:1，text:td.innerText，elem:td，dark}；
colsChanged[colIdx]=真；
}
});
const rowChanged=Object.values（colsChanged）.every（布尔）；
dark=rowChanged&&rowIdx>0？！dark:dark；
如果（暗）{
tr.classList.add（'dark'）；
}
leftMerged=false；
});
}

表格{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
th{
背景：#A9A9；
}
运输署，
th{
边框：1px纯黑；
文本对齐：居中；
填充：8px；
字体系列：monospace；
字号：17px；
}
.黑暗{
背景色：#dddddd；
}


单位
接触
国家
可乐
可乐
可乐6
可乐
可乐
可乐
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国因戈
1.
2.
A.
aa
aaa
aaaa
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
1.
2.
A.
aa
aaa
aaaa
莫特祖马商业中心
张锦松
墨西哥
1.
2.
B
bb
bbb
bbbb
恩斯特·汉德尔
张锦松
奥地利
1.
2.
C
复写的副本
ccc
中交
恩斯特·汉德尔
海伦·贝内特
英国
1.
2.
D
dd
ddd
dddd
笑巴克斯酒窖
田纳西
加拿大
1.
2.
E
ee
eee
eeee
Magazzini Alimentari Riuniti 1
乔瓦尼·罗维利1号
意大利
1.
2.
F
ff
fff
ffff
Magazzini Alimentari Riuniti 1
乔瓦尼·罗维利2号
意大利
1.
2.
F
ff
fff
ffff
Magazzini Alimentari Riuniti 3
乔瓦尼·罗维利3
意大利
1.
2.
F
ff
fff
ffff

谢谢@jo_va