有没有一种方法可以使用javascript只合并表中的某些列

时间：2019-02-11 18:20:05

标签： javascript html css

这是我的要求。 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;
   });
  }

现在我只想对某些列应用合并，例如：仅在两行第一列相同的情况下，我才希望对前三列和后两列进行合并，而不是整个表

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;
  });
}
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;
}
<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>

1 个答案:

答案 0 :(得分：1)

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

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列才会合并。

function myFunction() {
  const previousRow = {};
  const colsChanged = {};
  const colsToMerge = [0, 1, 7, 8];
  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 && colsToMerge.includes(colIdx)) {
        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;
  });
}
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;
}
<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>

相关问题
最新问题