在 JQuery 中更改 td 的 html

Posted

技术标签:

【中文标题】在 JQuery 中更改 td 的 html【英文标题】:Changing td's html in JQuery 【发布时间】:2011-01-29 07:55:44 【问题描述】:

我想用 jQuery 将表 td 中的文本从 1,1,1 更改为 1,2,3 但这似乎不起作用。我的代码有什么问题?

这是我的 javascript 函数。

    function reorder(targetId)
        var i = 1;
        jQuery.find(targetId).each(function()
            jQuery(this).attr("innerhtml", i);
            i ++;
        );
    

我的 html 代码。

<form>
    <input type="button" onClick="reorder('#index');" value="test"/>
    <table>
        <tr><td id="index">1</td></tr>
        <tr><td id="index">1</td></tr>
        <tr><td id="index">1</td></tr>
    </table>
</form>

【问题讨论】:

【参考方案1】:

那里有一些混杂的东西。试试这个...

function reorder(selector)
     jQuery(selector)
      .find('tr td:first-child')
      // Remove the + 1 if you want it to start at 0.          
      .html(function(i)  return i + 1; );

这里有一些变化...

将参数变量更改为更清晰。 您可以使用 jQuery('selector'),而不是 jQuery.find()。 您可以使用html() 方法。

值得一提的是,如果您不使用其他 jQuery 库(或不打算使用),您可以使用比 jQuery 短的 $

我还修改了你的 HTML

<form>
    <input type="button" onclick="reorder('#my-table');" value="test"/>
    <table id="my-table">
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
    </table>
</form>

您可能忘记了使用具有相同值的多个id 属性不是有效的标记。你可以在那里使用一个类,或者最好还是完全省略它。您可能不关心有效标记,但浏览器的 CSS 和 JavaScript 可以在他们期望 id 属性唯一时做一些时髦的事情(现在或将来)。

【讨论】:

【参考方案2】:

我认为您需要更改 i 值增量表达式。

function reorder(targetId)
        var i = 1;
        jQuery.find(targetId).each(function()
            jQuery(this).attr("innerHTML", i);
            i++; // Before that it was i ++ 
        );
    

【讨论】:

以上是关于在 JQuery 中更改 td 的 html的主要内容,如果未能解决你的问题,请参考以下文章

在滚动时使用 jquery 滑块更改 td 数据

如何使用 JQuery 仅更改表的 td 内的文本

使用 JQuery 更改下一个 <td> 文本

jquery,更改父 td 的 css 类

我需要使用 CSS 和 jQuery 在不更改其位置或 tds 宽度的情况下使输入字段溢出 td

jQuery for html table根据其他单元格值更改单元格内容