jquery - 在 JQuery 中更改 td 的 html

Question

我想使用 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>

Answer 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 属性唯一时，它们可以做一些时髦的事情(现在或将来)。