用jquery更改td中的數字值

Question

如何使用jquery在<td>元素中增加數值？我嘗試了以下，但沒有運氣。我有一個id =「＃increaseNum」的按鈕，並試圖通過點擊更改td單元格值。

HTML：

<table> 
<tr> 
    <td id="num">1</td> 
    <td id="num">5</td> 
    <td id="num">10</td> 
</tr> 
</table> 

JS：

$(document).ready(function() { 
    $("#increaseNum").click(function() {  
     $("#num").html(Number(("#num").innerText) + 1); 
    }); 
}); 

這不僅使第一<td>值消失。有什麼建議麼？

Answer 1

試試這個：刪除重複的ID，並使用類代替。遍歷每個NUM增加它的價值如下圖所示

HTML：

<table> 
<tr> 
    <td class="num">1</td> 
    <td class="num">5</td> 
    <td class="num">10</td> 
</tr> 
</table> 

的jQuery：

所有的

$(document).ready(function() { 
    $("#increaseNum").click(function() { 
     $(".num").each(function(){ 
      $(this).html(parseInt($(this).html())+1); 
     }); 
    }); 
}); 

Answer 2

試試這個

<table class="numeric"> 
    <tr> 
     <td id="num">1</td> 
     <td id="num">5</td> 
     <td id="num">10</td> 
    </tr> 
    </table> 

JS：

$(".numeric td").each(function() { 
$(this).html(parseInt(("#num").text()) + 1); 
}); 

Answer 3

你不能有重複的ID，以便使用類選擇多個元素

<table> 
    <tr> 
     <td class="num">1</td> 
     <td class="num">5</td> 
     <td class="num">10</td> 
    </tr> 
</table> 

然後

$(document).ready(function() { 
    $("#increaseNum").click(function() { 
     $(".num").html(function (i, html) { 
      return +html + 1; 
     }); 
    }); 
}); 

演示：Fiddle

在代碼中存在多個問題，("#num")返回字符串#num，你已經錯過了$。再次$("#num")會返回一個jQuery對象，因此它不具有innerText屬性，可以使用$('#num').text()

Answer 4

嘗試爲id=num替代class=num具有相同className來代替重複id的;加入<tbody>元素的父元素<table>

$("#increaseNum").on("click", function() { 
 
    $(".num").map(function(i, el) { 
 
    el.innerHTML = 1 + Number(el.innerHTML); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<button id="increaseNum">click</button> 
 
<table> 
 
    <tbody> 
 
<tr> 
 
    <td class="num">1</td> 
 
    <td class="num">5</td> 
 
    <td class="num">10</td> 
 
</tr> 
 
    </tbody> 
 
</table>

Answer 5

先給唯一ID，以TD或將其更改爲類。然後嘗試下面的內容，如果您將其更改爲類別：

$('.num').click(function(){ 
    $(this).html(parseInt($(this).html()) + 1); 
}); 

上面的代碼只會更改已被單擊的td值。如果你想改變所有的TD然後做每個循環。

Answer 6

嘗試使用類而不是ID =「NUM」 如果你真的需要使用相同的ID，儘量選擇如下：

$(document).ready(function() { 
    $("#increaseNum").click(function() {  
     $("td[id='num']").each(function(){ 
      $(this).html(parseInt($(this).text()) + 1); 
     }); 
    }); 
}); 

因爲使用$（「＃NUM」）將始終回報你一個元素只

演示以供參考：http://jsfiddle.net/49k92b68/1/

Answer 7

如果你的目標是增加每個TD，那麼你要使用類分配的，而不是ID應該是您的文檔中是唯一的。

這將是這個樣子..

HTML：

<table> 
<tr> 
    <td class="num">1</td> 
    <td class="num">5</td> 
    <td class="num">10</td> 
</tr> 
</table> 

的JavaScript：

$('.num').each(function(elem){ 
    var $elem = $(elem), 
     nValue = +$elem.text(); 
    $elem.text(nValue++); 
}); 

有一點要記住，如果你TD的內容不是數字，然後增量將失敗與NaN。