Question

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

<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>

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

喜欢

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以尝试以下几点：

但我建议的一件事是使用

<td style="width:30%;">Date</td>

而不是width属性。 http://www.w3schools.com/tags/att_td_width.asp

width属性不符合HTML5。

window.onload = function(){
  var tds = document.querySelectorAll('#mytable td'); 
  
  for(var i = 0; i < tds.length; i++){
    tds[i].setAttribute('data-width', tds[i].getAttribute('width'));
  }
}

<table id="mytable">
  <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>

Answer 3

您可以通过在width：data-label

上创建关联来轻松完成此操作

(function(){
    var assoc = {
                30: 'Date', 
                40: 'Description',
                17: 'Result',
                15: 'Range', 
                8: 'Comments'};

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

    for(x=0;x<tds.length;x++){
       tds[x].setAttribute('data-label', assoc[parseInt(tds[x].getAttribute('width'))]);
    }
();

Answer 4

$(document).ready(function (){
              $('#mytable tr td').each(function(){

                  console.log($(this).attr("data-width",$(this).text());
              })


          });

检查它

通过检查现有属性添加多个新属性

4 个答案: