我正在开发一个报告应用程序,该应用程序从不同的服务器提取信息并以特定的格式显示它们。我还使其完全响应,因此我得到的表格看起来像这样:
<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 隐藏了整个字段,它只是描述、结果、范围和注释。
最佳答案
提取文档中所有 td
元素的列表,并在看到有问题的宽度时应用适当的标签:
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>
关于javascript - 通过检查现有属性添加多个新属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30673092/