从表内的子体获取第一个数值

Get the first number value from a descendant inside a table

本文关键字：获取 第一个      更新时间：2023-09-26

我正在尝试一种方法来获取表（和相应的tbody）中的第一个数值，但它需要能够找到第一个数字，并忽略它所交叉的所有标签，直到它达到数值。

<table id="TableID">
    <thead></thead>
    <tbody>
        <tr></tr>
        <tr>
            <td></td>
            <td>
                <div>
                    <div>
                        <span>
                            4031007
                        </span>
                    </div>
                    <div>
                        <span>
                            whatever
                        </span>
                    </div>
                </div>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

在上面的例子中，我们试图找到4031007，它在<span>内部，但它可能是<div>或其他什么。我在不使用JQuery的情况下需要这个。有什么帮助吗？

你可以用简单的老方法来做：制作一个递归函数，返回第一个具有文本内容的节点的文本：

function findFirstNumber(node) {
    // If this is a text node, return its contents. Trim it because there is
    // whitespace between the elements that should be ignored
    if (node.nodeType == Node.TEXT_NODE)
        return node.textContent.trim();
    // Iterate over all child nodes and finde the first one that has text in it
    for (var child = node.firstChild; child; child = child.nextSibling) {
        var content = firstText(child);
        if (content && isNumber(content))
            return content;
    }
    // No text found
    return '';
}
function isNumber(value) {
    return !!isNaN(value);
}
console.log(findFirstNumber(document.getElementById('TableID')));

我使用了关于Node的mdn页面来了解如何做到这一点。

查看fiddle（打开控制台）

一个接受正则表达式的奇特查找函数怎么样。

function findRegExp(start, reg, mod) {
    if (! (reg && start)) return this;
    return [].slice.call(start.querySelectorAll('*')).filter(function(elem) {
        if (typeof reg == 'string') 
            reg = new RegExp(reg, mod ? mod : '');
        var clone = elem.cloneNode(true),
            child = clone.children;
        for (var i=child.length; i--;) 
            clone.removeChild(child[i]);
        var txt = clone.textContent.trim();
        return reg.test(txt);
    });
}

像一样使用

var elems = findRegExp(document.getElementById('TableID'), /^'d+$/);

FIDDLE

和jQuery版本

$.fn.findRegExp = function(reg, mod) {
    if (!reg) return this;
    return this.find('*').addBack().filter(function() {
        if (typeof reg == 'string') 
            reg = new RegExp(reg, mod ? mod : '');
        var c = $(this).clone();
        c.children().remove();
        var txt = $.trim(c.text());
        return reg.test(txt);
    });
}

然后你可以搜索只包含数字的元素

$('#TableID').findRegExp(/^'d+$/);

FIDDLE

相关文章：