Как я могу использовать jQuery для увеличения ячейки таблицы по 1 при каждом нажатии кнопки?

Question

Вот мой HTML:

<table class="myTable" summary="Table with ages">  
    <tr> 
     <th>Name</th> 
     <th>Age</th>    
    </tr> 

    <tr> 
     <td>Joe</td> 
     <td id="joesAge">35</td> 
    </tr> 

    <tr> 
     <td>Becky</td> 
     <td id="beckysAge">40</td> 
    </tr> 

    <tr> 
     <td>Joey</td> 
     <td id="joeysAge">50</td> 
    </tr>     
</table> 

<button onclick="add">Add</button> 

мне нужны клетки joesAge, beckysAge и joeysAge для каждого приращения на 1 каждый раз, когда кнопка добавления кнопки. Может ли кто-нибудь помочь мне, пожалуйста?

Answer 1

Вот решение:

<script type="text/javascript"> 
function add(){ 

    // solution 
    // get the row you want 
    // get the value, parseInt it and increment by 1 
    // replace the content of the row by incremented value 

    var joesAgeTd = document.getElementById("joesAge"); 
    var newJoesAge = parseInt(joesAgeTd.innerHTML) + 1; 
    joesAgeTd.innerHTML = newJoesAge; 

    var beckysAgeTd = document.getElementById("beckysAge"); 
    var newbeckysAge = parseInt(beckysAgeTd.innerHTML) + 1; 
    beckysAgeTd.innerHTML = newbeckysAge; 

    var joeysAgeTd = document.getElementById("joeysAge"); 
    var newjoeysAge = parseInt(joeysAgeTd.innerHTML) + 1; 
    joeysAgeTd.innerHTML = newjoeysAge; 
} 
</script> 
<table class="myTable" summary="Table with ages"> 
    <tr> 
     <th >Name</th> 
     <th>Age</th> 
    </tr> 

    <tr> 
     <td>Joe</td> 
     <td id="joesAge">35</td> 
    </tr> 

    <tr> 
     <td>Becky</td> 
     <td id="beckysAge">40</td> 
    </tr> 

    <tr> 
     <td>Joey</td> 
     <td id="joeysAge">50</td> 
    </tr> 
</table> 
<button onclick="add()">Add</button> 

Answer 2

Вот jsFiddle отображение моего примера решения.

Я использовал .on('click') событие, чтобы связать нажатие кнопки, я также жестко кодируюсь td элемент Id, который может (должен) быть написано для обработки любого идентификатора элемента в таблице, которая содержала слово " Возраст », например.

UPDATE

$(function() { 

// bind button click: 
$(document).on('click', 'button', function() { 

    // array for IDs: 
    var items = []; 

    // find all TD ID's which contains "Age": 
    $(".myTable tr td[id*='Age']").each(function() { 

     var id = $(this).attr('id');    

     if(id) { 
      // add *Age IDs ready to be incremented: 
      items.push('#' + id); 
     } 

    }); 

    // Loop through all ID's and increment by 1: 
    $.each(items, function (index, value) { 

     var age = parseInt($(value).text(), 10); 

     if (age) { 
      $(value).text(age + 1); 
     } 
    }); 
}); 
}); 

Я обновил мой JsFiddle, который обрабатывает любой td элемент с Id атрибута, содержащего слово «Возраст»