Передача параметра функции jQuery для динамических целей

Question

Ниже приведены фрагменты, которые показывают (упрощенный) конечный продукт, на который я нацеливаюсь (вы можете видеть, запускаете ли вы код).

Проблема в том, что это не масштабируемо. Моя фактическая таблица генерируется через цикл PHP и длиной в сотни строк. Мне нужно каким-то образом сказать jQuery ", если я нажму кнопку редактирования в строке 60, а затем выполните следующие изменения в 60-м имени, возрасте и т. Д. Моя фактическая страница написана на PHP, и я могу сказать, что цикл генерировать Edit кнопки с целями, которые приравниваются к итерации цикла (ID = $ я), но я не знаю, как сделать мой JQuery код гибким.

$(document).ready(function() { 
 
    $("#1").click(function() { 
 
     $("#name1").html("<input type='text' name='newname1' value='' size='2' />"); 
 
     $("#age1").html("<input type='text' name='newage1' value='' size='2' />"); 
 
     $("#button1").html("<input type='button' name='newbutton1' value='submit' />"); 
 
    }); 
 
    
 
    $("#2").click(function() { 
 
     $("#name2").html("<input type='text' name='newname2' value='' size='2' />"); 
 
     $("#age2").html("<input type='text' name='newage2' value='' size='2' />"); 
 
     $("#button2").html("<input type='button' name='newbutton2' value='submit' />"); 
 
    }); 
 
    
 
    $("#3").click(function() { 
 
     $("#name3").html("<input type='text' name='newname3' value='' size='2' />"); 
 
     $("#age3").html("<input type='text' name='newage3' value='' size='2' />"); 
 
     $("#button3").html("<input type='button' name='newbutton3' value='submit' />"); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
     <td id='name1'>Pete</td> 
 
     <td id='age1'>32</td> 
 
     <td id='button1'><input id='1' type='button' value='edit' /></td> 
 
    </tr> 
 
     <tr> 
 
     <td id='name2'>Brian</td> 
 
     <td id='age2'>25</td> 
 
     <td id='button2'><input id='2' type='button' value='edit' /></td> 
 
    </tr> 
 
     <tr> 
 
     <td id='name3'>John</td> 
 
     <td id='age3'>30</td> 
 
     <td id='button3'><input id='3' type='button' value='edit' /></td> 
 
    </tr> 
 
      
 
</table>

Answer 1

Вы можете использовать динамические селекторы и объедините функцию нажатия кнопки редактирования, как показано ниже:

$("input[value='edit']").click(function() { 
var id=$(this).attr('id'); 

$("#name"+id).html("<input type='text' name='newname' value='' size='2' />"); 
$("#age"+id).html("<input type='text' name='newage' value='' size='2' />"); 
$("#button"+id).html("<input type='button' name='newbutton' value='submit' />"); 

});