Question

我有一个包含多行的表，每行在标记内都有一个按钮。每个td标签中还有一个链接，当用户点击时，应该显示相应的按钮，但是当我点击链接时，所有按钮都会显示。

这是html：

            <tr>
            <td width="10%" align="center"></td>
            <td width="80%" align="left"><span style="font-weight:bold;"><a href="javascript:void(0);" class="editText">About Me</a>:</span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" class="userDetails" style="display:none;" value="Save"/></td>
            <td width="10%" align="center"></td>
        </tr>
        <tr>
            <td width="10%" align="center"></td>
            <td width="80%" class="originalText" align="left" valign="top">
            '.$aboutMe.'
            </td>
                <td width="80%" class="aboutMe" align="center" valign="top">
                    <div style="display:none; font-weight:bold; color:red;" class="msgStatusText"></div>
                    <textarea class="textBox" cols="20" rows="auto"  style="display:none;">
                    '.$aboutMe.'
                    </textarea>
                </td>
            <td width="10%" align="center"></td>
        </tr>

这里是jquery：

                $(function(){
                $(".editText").each(function(e){
                    $(this).unbind("click").click(function(e){//if user clicks on title (aboutMe,etc)
                        e.preventDefault();     

                            //get handle for textArea           //IF ANY EDITS, WILL BE IN THE VAR SECTION HERE
                            var textAreaHandle = $(this).parents("tr").next().find(".originalText"); //original userText
                            var oldTextValue = jQuery.trim($(textAreaHandle).text()); //trim value, else will not compare properly
                            var editTextBox = $(this).parents("tr").next().find(".textBox"); //handle for textarea
                            var fieldName = $(editTextBox).parent("td").attr("class"); //fieldName
                            var buttonHandle = $(this).parents("td").find(".userDetails");//WORKS, but gets ALL buttons, not just the corresponding one
                            var msgStatusHandle = $(this).parents("tr").next("tr").find(".msgStatusText");

使用以下代码显示按钮，这是好的，它只是搞砸了相应按钮（上面的代码）的句柄：

buttonHandle.css({"visibility":"visible"}).show();

有多行，每行都与上面的行相同，所以如果用户点击一行，则只显示相应的按钮。

有人请告诉我我做错了什么。无论我做什么，我似乎都无法做到这一点。谢谢你！

Answer 1

更改此行：

var buttonHandle = $(this).parents("td").find(".userDetails");

对此：

var buttonHandle = $(this).closest('td').find('.userDetails');

jQuery：从多个单元格中的表格单元格中选择一个输入

1 个答案: