jquery获取有值的tr

在网页的设计和开发中，我们经常会用到jQuery这个强大的JavaScript库来简化DOM操作和事件处理，就让我们聊聊如何用jQuery获取表格中所有含有值的<tr>行。

我们得了解<tr>是HTML中用来定义表格行的元素，在一个表格中，每一行都由<tr>标签包裹，而每一行中的数据则由<td>（单元格）或者<th>（表头单元格）标签来表示，当我们想要获取所有有值的<tr>行时，我们实际上是在寻找那些至少包含一个<td>或<th>元素的行。

基本选择器

在jQuery中，我们可以使用基本选择器来选取特定的元素，对于表格行，我们可以使用$('tr')来选取所有的<tr>元素，但这样会包括那些空的行，所以我们需要进一步筛选。

过滤器

jQuery提供了强大的过滤器，可以帮助我们筛选出符合条件的元素，对于我们的需求，可以使用:has()选择器来选取包含至少一个子元素的<tr>元素。

$('tr:has(td)').each(function() {
    // 这里的代码会对每个有<td>的<tr>执行
});

这段代码会遍历所有的<tr>元素，并检查它们是否包含<td>元素，如果包含，那么这些行就会被选中，我们可以在回调函数中对它们进行进一步的操作。

检查值的存在

我们不仅需要检查<tr>元素是否包含<td>，还需要检查这些<td>中是否有实际的值，这可以通过检查<td>的text()内容是否为空来实现。

$('tr').each(function() {
    var hasValue = $(this).find('td').filter(function() {
        return $.trim($(this).text()) !== '';
    }).length > 0;
    if (hasValue) {
        // 这里的代码会对每个有值的<td>的<tr>执行
    }
});

这段代码会检查每个<tr>元素中的所有<td>，如果至少有一个<td>不为空（即$.trim($(this).text()) !== ''），那么这个<tr>就会被认为“有值”。

综合应用

将上述两个步骤结合起来，我们可以创建一个更全面的解决方案，来获取所有包含至少一个有值<td>的<tr>元素。

$('tr').each(function() {
    var hasValue = $(this).find('td').filter(function() {
        return $.trim($(this).text()) !== '';
    }).length > 0;
    if (hasValue) {
        // 这里的代码会对每个有值的<tr>执行
        console.log('This row has value:', $(this));
    }
});

优化选择器

虽然上述方法有效，但它会遍历所有的<tr>元素，这在大型表格中可能会导致性能问题，我们可以通过直接在:has()选择器中使用:contains()过滤器来优化这个过程。

$('tr:has(td:contains(" "))').each(function() {
    // 这里的代码会对每个至少有一个<td>包含非空格文本的<tr>执行
});

这段代码会直接选取那些至少有一个<td>元素包含非空格文本的<tr>元素，这样可以减少遍历的次数，提高效率。

通过上述方法，我们可以有效地获取表格中所有含有值的<tr>行，这种方法不仅适用于简单的表格，也可以扩展到更复杂的表格结构中，在实际开发中，我们可以根据具体的需求选择合适的方法来实现。

记得，jQuery的强大之处在于它的灵活性和简洁性，通过合理使用选择器和过滤器，我们可以轻松地实现复杂的DOM操作，希望这些小技巧能帮助你在开发中更加得心应手。