Question

好的，我有一个HTML / PHP网页和一个外部JS文件。我正在尝试实现AJAX。我有一张桌子，每排都有一个编辑按钮。我想要它，以便当我单击编辑按钮时，我的取消按钮显示（我已隐藏）仅用于该行。

我的想法是如果我使用$（this）.parent选择单击按钮的父级（更新）然后添加（＆＃34; .cancel＆＃34;）。toggle（）;它只会切换单击按钮的父元素的取消按钮。

我尝试使用此代码，

    $pTable .=  "<div class='row'>
                <div class='cell'>
                    <a class='delete'>Delete</a>
                    <a class='edit'>Edit</a>
                    <a class='cancel'>Cancel</a>
                </div>
                <div class='cell'><input disabled size='2' type='text' name='txtID' value='$ID'></div>
                <div class='cell'><input disabled size='25' type='text' name='txtFirst' value='$first'></div>
                <div class='cell'><input disabled size='25' type='text' name='txtLast' value='$last'></div>
                <div class='cell'><input disabled size='25' type='text' name='txtEmail' value='$email'></div>
                <div class='cell'><input disabled size='25' type='text' name='txtTeam' value='$team'></div>
            </div>";

有谁知道我该怎么做？

以下是相关的HTML

{{1}}

我有一个while循环设置来显示每一行，但是当我尝试将其粘贴在其中时，搞砸了格式化。感谢。

Answer 1

最近父级的最近函数查询！使用以下：

$(this).closest(".row").find(".cancel").toggle();

Answer 2

closest()函数搜索DOM树，因此提供编辑按钮的祖先

  $(this).closest(".cell").find('.delete').toggle();
  $(this).closest(".cell").find('.cancel').toggle();

JSFiddle

Answer 3

您可以执行以下操作

HTML

  <table>
    <tr>
        <td>Hello</td>
        <td><input type="button" class="edit" value="Edit"/></td>
        <td><input type="button" class="canclebutton" value="Cancel"/></td>
    </tr>
    <tr>
        <td>Hello1</td>
        <td><input type="button" class="edit" value="Edit" /></td>
        <td><input type="button" class="canclebutton" value="Cancel" /></td>
    </tr>
    <tr>
        <td>Hello2</td>
        <td><input type="button" class="edit" value="Edit" /></td>
        <td><input type="button" class="canclebutton" value="Cancel" /></td>
    </tr>
    <tr>
        <td>Hello3</td>
        <td><input type="button" class="edit" value="Edit" /></td>
        <td><input type="button" class="canclebutton" value="Cancel" /></td>
    </tr>
</table>

脚本

$(".canclebutton").hide();

$(".edit").click(function () {        
    $(this).closest('tr').find('.canclebutton').toggle();
    .
    .
    .
    .
});

Answer 4

$pTable =  "<div class='row'><div class='cell'><a class='delete'>Delete</a><a class='edit'>Edit</a><a class='cancel'>Cancel</a></div><div class='cell'><input disabled size='2' type='text' name='txtID' value='$ID'></div><div class='cell'><input disabled size='25' type='text' name='txtFirst' value='$first'></div><div class='cell'><input disabled size='25' type='text' name='txtLast' value='$last'></div><div class='cell'><input disabled size='25' type='text' name='txtEmail' value='$email'></div><div class='cell'><input disabled size='25' type='text' name='txtTeam' value='$team'></div></div>";

$('#div').append($pTable)


$(document).on('click',".edit",function() {
    $(this).next(".cancel").toggle();
});

.cancel{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'></div>

由于它是动态创建的，因此请点击事件点击文档使用.on()然后使用.next()，因为取消是编辑的旁边

如何使用JQuery在特定行中显示特定按钮

4 个答案: