使用表格

时间：2019-02-01 09:37:52

标签： javascript html css

我有一个普通的html表。我的要求是：

1）表格应为白色和灰色图案，例如第一行应为白色，第二行应为灰色，第三行应为白色，第四行应为白色通过使用CSS实现了这一点。

2）第二个要求是图案应交替为白色和灰色，但是如果重复任何值，则它应显示与该值相同的颜色。例如：如果'A'以白色出现，则如果重复出现，则它应该再次为白色，但下一个单元格应该为灰色，反之亦然。sample pattern

我正在添加我的js小提琴- js fiddle link 

    <body onload="myFunction()">
    <div class="col-lg-12" style="width: 100%; height: 78%;overflow-y: auto;overflow-x: auto;">
    <div class="container" style="width: 100%;">

      <table class="table table-bordered">
        <thead style="background-color: red;">
    <tr class="bordered">
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th1</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th2</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th3</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th4</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th5</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th6</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th7</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th8</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th9</b></th>
    <th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th10</b></th>
    </tr>
    </thead>
     <tbody>
    <tr class="bordered">
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td1 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td2 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td3 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td4 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td5 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td6 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td7 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td8 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td9 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td10 </td>
    </tr>

        </tbody>
        <tbody>
    <tr class="bordered">
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td1 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td2 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td3 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td4 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td5 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td6 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td7 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td8 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td9 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td10 </td>
    </tr>

        </tbody>
        <tbody>
    <tr class="bordered">
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td11 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td12 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td13 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td14 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td15 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td16 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td17 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td18 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td19 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td20 </td>
    </tr>

        </tbody>
            <tbody>
    <tr class="bordered">
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td21 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td22 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td23 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td24 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td25 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td26 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td27 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td28 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td29 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td30 </td>
    </tr>

        </tbody>
                <tbody>
    <tr class="bordered">
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td21 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td22 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td23 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td24 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td25 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td26 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td27 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td28 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td29 </td>
    <td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td30 </td>
    </tr>

        </tbody>
      </table>
      </div>
      </div>
      </body>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tbody:nth-child(even) {
  background-color: #dddddd;
}
</style>
<script>
function myFunction(){
  alert("hai");
  for(var i=0;i<document.getElementsByTagName('tbody').length;i++){
    for( var j=i+1;j<document.getElementsByTagName('tbody').length;j++){
      if(document.getElementsByTagName('tbody')[i].children[0].children[0].innerText == 
        document.getElementsByTagName('tbody')[j].children[0].children[0].innerText){
        document.getElementsByTagName('tbody')[i].classList.add('parent');
       document.getElementsByTagName('tbody')[j].classList.add('parent');
      }
    }
  }
}
</script>

2 个答案:

答案 0 :(得分：0)

这样使用

for(var i=0;i<document.getElementsByTagName('tbody').length;i++){

  if(document.getElementsByTagName('tbody')[i].children[0].children[0].innerText == 
    document.getElementsByTagName('tbody')[i].children[0].children[0].innerText){
    document.getElementsByTagName('tbody')[i].classList.add('parent');
   for color change
  }
}

答案 1 :(得分：0)

您必须遍历tbody，并在第一次遇到该条目时记住与每个文本条目相关联的阴影。因此，当您遇到一个条目时，首先要验证它是否曾经遇到过，如果是，请从地图上获取其阴影，否则，请切换阴影并将其添加到地图中。

由于您的两个要求略有对立，因此您必须删除构成交替图案的CSS，而应使用阴影类。

这里，我只对深色阴影使用单个类，并在遍历tbody的同时将其添加到深色行中。

function myFunction() {
  const isDark = { };
  let shade = false;

  Array.from(document.getElementsByTagName('tbody')).forEach(body => {
    const text = body.children[0].children[0].innerText;
    if (!(text in isDark)) {
      isDark[text] = shade;
      shade = !shade;
    }
    if (isDark[text]) body.classList.add('dark');
  });
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
.dark {
  background-color: #dddddd;
}
<body onload="myFunction()">
<div class="col-lg-12" style="width: 100%; height: 78%;overflow-y: auto;overflow-x: auto;">
<div class="container" style="width: 100%;">

  <table class="table table-bordered">
    <thead style="background-color: red;">
<tr class="bordered">
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th1</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th2</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th3</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th4</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th5</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th6</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th7</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th8</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th9</b></th>
<th scope="col" bgcolor="#a9a9a9" style="font-size: 17px;font-family: monospace;text-align:center;"><b>th10</b></th>
</tr>
</thead>
 <tbody>
<tr class="bordered">
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td1 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td2 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td3 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td4 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td5 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td6 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td7 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td8 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td9 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td10 </td>
</tr>

    </tbody>
    <tbody>
<tr class="bordered">
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td1 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td2 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td3 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td4 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td5 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td6 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td7 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td8 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td9 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td10 </td>
</tr>

    </tbody>
    <tbody>
<tr class="bordered">
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td11 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td12 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td13 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td14 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td15 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td16 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td17 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td18 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td19 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td20 </td>
</tr>

    </tbody>
        <tbody>
<tr class="bordered">
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td21 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td22 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td23 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td24 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td25 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td26 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td27 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td28 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td29 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td30 </td>
</tr>

    </tbody>
            <tbody>
<tr class="bordered">
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td21 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td22 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td23 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td24 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td25 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td26 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td27 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td28 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td29 </td>
<td style="text-align:center;font-size: 17px;font-family: monospace;padding-top:2%;">td30 </td>
</tr>

    </tbody>
  </table>
  </div>
  </div>
  </body>

如果要合并重复的标签，则必须将行分组在同一<tbody>标签中，至少要合并的行分组，这将允许您删除复制副本，并在第一个标签上添加rowspan=X。这是显示此内容的代码段：

function myFunction() {
  const firstRows = { };
  let shade = false;
  
  const colsToMerge = [0, 1];

  Array.from(document.querySelectorAll('tbody tr')).forEach(tr => {
    const text = tr.children[0].innerText;
    if (!(text in firstRows)) {
      firstRows[text] = { shade, elem: tr, count: 1 };
      shade = !shade;
    } else {
      const firstRow = firstRows[text]
      firstRow.count++;
      colsToMerge.forEach(i => tr.children[i].remove());
      colsToMerge.forEach(i =>
        firstRow.elem.children[i]
                .setAttribute('rowspan', firstRow.count)
      );
    }
    if (firstRows[text].shade) tr.classList.add('dark');
  });
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
th {
  background: #a9a9a9;
}
td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
  font-family: monospace;
  font-size: 17px;
}
.dark {
  background-color: #dddddd;
}
<body onload="myFunction()">
    <table>
        <thead>
            <tr>
                <th><b>th1</b></th>
                <th><b>th2</b></th>
                <th><b>th3</b></th>
                <th><b>th4</b></th>
                <th><b>th5</b></th>
                <th><b>th6</b></th>
                <th><b>th7</b></th>
                <th><b>th8</b></th>
                <th><b>th9</b></th>
                <th><b>th10</b></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>td1 </td>
                <td>td2 </td>
                <td>td3 </td>
                <td>td4 </td>
                <td>td5 </td>
                <td>td6 </td>
                <td>td7 </td>
                <td>td8 </td>
                <td>td9 </td>
                <td>td10 </td>
            </tr>
            <tr>
                <td>td1 </td>
                <td>td2 </td>
                <td>td3 </td>
                <td>td4 </td>
                <td>td5 </td>
                <td>td6 </td>
                <td>td7 </td>
                <td>td8 </td>
                <td>td9 </td>
                <td>td10 </td>
            </tr>
            <tr>
                <td>td11 </td>
                <td>td12 </td>
                <td>td13 </td>
                <td>td14 </td>
                <td>td15 </td>
                <td>td16 </td>
                <td>td17 </td>
                <td>td18 </td>
                <td>td19 </td>
                <td>td20 </td>
            </tr>
            <tr>
                <td>td21 </td>
                <td>td22 </td>
                <td>td23 </td>
                <td>td24 </td>
                <td>td25 </td>
                <td>td26 </td>
                <td>td27 </td>
                <td>td28 </td>
                <td>td29 </td>
                <td>td30 </td>
            </tr>
            <tr>
                <td>td21 </td>
                <td>td22 </td>
                <td>td23 </td>
                <td>td24 </td>
                <td>td25 </td>
                <td>td26 </td>
                <td>td27 </td>
                <td>td28 </td>
                <td>td29 </td>
                <td>td30 </td>
            </tr>
        </tbody>
    </table>
</body>

相关问题
最新问题