文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用表中的javascript根据用户id更改颜色

问使用表中的javascript根据用户id更改颜色
EN

Stack Overflow用户
提问于 2019-02-01 09:37:51
回答 2查看 142关注 0票数 1

我有一个正常的html table.My要求是：

1)表应为白色和灰色的pattern.Say，第一行应为白色，第二排应为灰色，第三排应为白色，第四行应为白色，我用css实现了这一点。

2)第二项要求是，图案应为白色和灰色，但如果有任何价值重复，则应显示与价值相同的颜色。如果'A‘是白色的，那么如果它被重复，那么它应该再次以白色表示，但是下一个单元格应该是灰色的，反之亦然。样本模式。

我加入了我的js小提琴- js小提琴连接

代码语言：javascript
复制
    <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>
javascript
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-01 10:17:00

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

由于您的两个需求略有对立，所以您必须删除生成交替模式的CSS，而使用一个类来表示阴影。

在这里，我只对暗阴影使用一个类，并在遍历tbody时将其添加到黑暗的行中。

​

代码语言：javascript
复制
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');
  });
}
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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。这里有一个片段来展示这一点：

​

代码语言：javascript
复制
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');
  });
}
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2019-02-01 09:42:27

像这样使用

代码语言：javascript
复制
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
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54476679

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档