在JQuery中更改td的html

时间:2010-03-19 05:32:18

标签: jquery html-table innerhtml

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

2 个答案:

答案 0 :(得分:3)

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

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属性是唯一的。

答案 1 :(得分:1)

我认为你需要改变i值增量表达式。

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