Question

以下是显示我所针对的（简化的）最终产品的片段（您可以看看是否运行了代码）。

问题是这不可扩展。我的实际表是通过PHP循环生成的，长度为数百行。我需要一些告诉jQuery的方法“如果我单击第60行中的编辑按钮，然后对第60个名称，年龄等条目执行以下更改。我的实际页面是用PHP编写的，我可以告诉循环到生成编辑按钮，其目标等同于循环迭代（id = $ i），但我不知道如何使我的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' />");

});

将参数传递给动态目标的jQuery函数

1 个答案: