Question

我有一个包含一些动态生成数据的表。问题是我想选择具有数字（格式化或非格式化）数据类型的所有<td>'s并对它们应用某种样式。我最好能用jQuery或JavaScript做到这一点吗？任何帮助或建议将不胜感激。谢谢。

<table>
<tr>
    <th>Days</th>
    <th>Booth 1</th>
    <th>Booth 2</th>
    <th>Booth 3</th>
</tr>
<tr>
    <td>Monday</td>
    <td>12,000</td>
    <td>2,500</td>
    <td>0</td>
</tr>
<tr>
    <td>Tuesday</td>
    <td>4,200</td>
    <td>0</td>
    <td>3,500</td>
</tr>
<tr>
    <td>Wednesday</td>
    <td>Out Of Order</td>
    <td>Busy</td>
    <td>11,540</td>
</tr>
</table>

Answer 1

像

这样的东西

$('td').each(function () {
    if ($(this).html().match(/^\s*\d[\d,\.]*\s*$/)) {
        $(this).css('background-color', 'red');
        // TODO: something cool
    }
});

使用简单的正则表达式匹配数字，然后匹配<td>个元素中的零个或多个数字或逗号或小数点。然后你可以在元素上执行你喜欢的任何动作。

Answer 2

在生成服务器端时，最好只为这些td添加一个类。

如果这不是一个选项，您可以将.filter()与正则表达式一起使用：

$('td').filter(function(){
    return /^[.,\d]+$/.test( $.text(this) );
})
.css('color', 'blue'); // or anything else...

这是小提琴：http://jsfiddle.net/m7gQL/

Answer 3

假设问题是消息文本中的问题而不是标题中的问题，最佳镜头可能是为包含数字数据的单元格指定合适的类属性。最好在生成表格数据时完成，因为您应该知道您正在生成哪种数据。如果无法做到这一点，您可能需要编写一个处理单元格的循环，并尝试根据数字模式解析其内容（整个包含）。您需要指定可能出现的数字数据的类型（例如，只是整数，或其他什么？以及哪些符号？）。

Answer 4

您无法通过查看生成的HTML来执行此操作，因为即使单元格包含数字，列的数据类型可能仍然是字符串。相反，您必须在生成HTML时输出此信息。因此，具有数字数据类型的单元格将获得属性

<td class="numeric"> ... </td>

numeric将被定义为

td.numeric { ... }

Answer 5

尝试一下：

$(document).ready(function(){
  $('table td').each(function(){
    if (!isNaN($(this).html().replace(',','')))
    {
      $(this).css('background-color', 'green');
    }
  })
});

选择包含表中数值的td

5 个答案: