将 javascript 函数应用于 html 元素

Posted 2023-04-14

【中文标题】将 javascript 函数应用于 html 元素

【英文标题】：Apply javascript function to an html element

【发布时间】：2012-11-29 00:04:38

【问题描述】：

抱歉这个菜鸟问题，但我正在尝试将此 javascript 函数应用于 html 表中的数据。函数来自this Stack Overflow post。

function numberWithCommas(x) 
    return x.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");

我希望将这个函数应用到这样的事情上：

<table>
    <tr>
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

希望在 5,600 之后返回 5,000。我想不通这个简单的事情。我知道我需要在其中一个标签上使用 id 或 class，并且这需要匹配函数中的某些内容，所以我尝试了

<table>
    <tr class="numberWithCommas">
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

无济于事。鉴于赞成票的数量，我确信该功能有效。

请好心人指导我完成这项工作的步骤吗？我已经用谷歌搜索了一个基本教程，但没有找到任何东西。

【参考方案1】：

您首先需要获取所有tds，在内容上调用函数并将结果插入回单元格中。

HTML

<table>
    <tr class="numberWithCommas">
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

Javascript

function numberWithCommas(x) 
    return x.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");


var elements = document.querySelectorAll('.numberWithCommas td'),
    i;

for (i in elements) 
    if (elements[i].innerHTML !== undefined) 
        elements[i].innerHTML = numberWithCommas(elements[i].innerHTML);
    

Demo

解释所有这些代码：

这是你的功能：

function numberWithCommas(x) 
    return x.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");

这允许我们在所有trs 中以numberWithCommas 作为一个类来获取所有td，并将它们全部设置为javascript 变量elements 中的一个数组：

var elements = document.querySelectorAll('.numberWithCommas td'),
    i;

然后我们遍历数组，一次访问一个td：

for (i in elements) 
    ...

在 for 循环中，我们检查单元格的值是否为空：

if (elements[i].innerHTML !== undefined) 
    ...

在if 语句中，我们调用函数numberWithCommas() 并将elements[i].innerHTML 的值传递给它。然后我们取回结果字符串并将其应用于elements[i].innerHTML：

elements[i].innerHTML = numberWithCommas(elements[i].innerHTML);

【参考方案2】：

您需要遍历each td 并应用此函数..

var tr = document.getElementsByClassName('numberWithCommas');

for (var i = 0, len = tr.length; i < len; i++) 
    for(var j=0,len1 = tr[i].children.length;j<len1; j++)
        var td = tr[i].children[j];
        td.innerHTML= numberWithCommas(td.innerHTML)
    
​

function numberWithCommas(x) 
    return x.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");
;

Check Fiddle

使用 jQuery

$('table tr.numberWithCommas').each(function()
    var $tr = $(this);
    $tr.find('td').each(function()
        var $td = $(this);
        $td.html(function()
            return  numberWithCommas(this.innerHTML);
        );
    );        
);

jQuery Fiddle

【讨论】：

你这是什么意思？？

@gibberish 代码自动运行。如果他想要一个触发器，他可以把它放在它自己的函数中并调用它。