从表中选择包含数值的 td答案

【问题标题】：Select td's that contains numeric values from a table从表中选择包含数值的 td
【发布时间】：2012-02-11 01:57:45
【问题描述】：

我有一个包含一些动态生成数据的表格。问题是我想选择所有具有数字（格式化或非格式化）数据类型的<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>

【问题讨论】：

标签： javascript jquery html css jquery-selectors

【解决方案1】：

你最好在tds 在服务器端生成它们时添加一个类。

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

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

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

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

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

而numeric 将被定义为

td.numeric { ... }

【讨论】：

【解决方案4】：

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

【讨论】：

服务器端生成的html table，在列数和行数上是不可预测的。它是从复杂的sql query 生成的报告，该报告因部门而异，因此服务器端代码会根据结果集计算受影响的sql tables 的数量并为html table 生成列

【解决方案5】：

怎么样

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

它使用一个简单的正则表达式来匹配<td> 元素中的一个数字，然后是零个或多个数字或逗号或小数点。然后，您可以对元素执行任何您喜欢的操作。

【讨论】：

这真是太棒了。正是我想要的。非常感谢@rfausak