通过检查现有属性来添加多个新属性 [英] Add multiple new attributes by checking the existing ones

问题描述

我正在开发一个报表应用程序，该应用程序从不同服务器中提取信息并以特定格式显示它们.我也正在使它完全响应，所以我得到的表看起来像这样:

I am working on a reporting application that pulls info from different servers and displays them in a specific format. I am also making this completely responsive so the tables that I get look something like this:

<table>
  <tr>
    <td width="30%">Date</td>
    <td width="40%">Description</td>
    <td width="17%">Result</td>
    <td width="15%">Range</td>
    <td width="8%">Comments</td>
  </tr>
</table>

我想知道如何根据它们的宽度为每个标签添加数据标签.

I want to know how I could add data-label to each depending on what width they have.

喜欢

<td width="30%" data-label="Date">Date</td>

我实际上并不需要日期字段，因此我用CSS隐藏了整个字段，只是描述，结果，范围和注释.

I don't actually need the date field so I have hidden that entire field with CSS its just the description, result, range and comments.

推荐答案

拉出文档中所有td元素的列表，并在看到宽度时应用适当的标签:

Pulling a list of all td elements in the document, and applying the appropriate labels when the widths-in-question are seen:

var tds = document.getElementsByTagName('td');

for ( var i = 0; i < tds.length; ++i )
  {
    var td = tds[i];
    var label = null;
    
    switch (td.getAttribute('width'))
    {
      case '30%':
        label = 'Date';
        break;
      case '40%':
        label = 'Description';
        break;
      case '17%':
        label = 'Result';
        break;
      case '15%':
        label = 'Range';
        break;
      case '8%':
        label = 'Comments';
        break;
    }
    
    if (label)
      {
        td.setAttribute('data-label', label);
      }
  }

td[data-label=Date] {
  color: red;
}

td[data-label=Description] {
  color: green;
}

td[data-label=Result] {
  color: purple;
}

td[data-label=Range] {
  color: blue;
}

td[data-label=Comments] {
  font-style: italic;
}

<table>
  <tr>
    <td width="30%">Date</td>
    <td width="40%">Description</td>
    <td width="17%">Result</td>
    <td width="15%">Range</td>
    <td width="8%">Comments</td>
  </tr>
  <tr>
    <td width="30%">Blah</td>
    <td width="40%">Blah</td>
    <td width="17%">Blah</td>
    <td width="15%">Blah</td>
    <td width="8%">Blah</td>
  </tr>
</table>

这篇关于通过检查现有属性来添加多个新属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！