javascript - 如何隐藏和显示表格行中的元素以允许内联编辑

Question

我正在尝试实现通过 php 生成的表数据的内联编辑。

这是生成一行的 php 代码

<tr class="zipCodeRow">
<td>
    <a class="hideOnEdit zipCodeFormSubmit" name="' . $rowZipCodes['id'] . '" href="#">Edit</a>
    <input type="submit" class="hideOnLoad submitEditZipCodeRow zipCodeFormSubmit" id="submitEditZipCodeRow-' . $rowZipCodes['id'] . '" value="Save Edits" /><br />
    <input type="submit" class="hideOnLoad cancelEditZipCodeRow zipCodeFormSubmit" value="Cancel Edit" />
</td>
<td>
    <input type="checkbox" class="chkDeleteZipCodeRow zipCodeFormSubmit" name="deleteZipCodeRow[]" value"' . $rowZipCodes['id'] . '" />
</td>
<td>
    <label class="hideOnEdit">' . $rowZipCodes['state'] . '</label>
    <input type="text" class="hideOnLoad" size="20" maxlength="50" value="' . $rowZipCodes['state'] . '"
</td>
<td>
    <label class="hideOnEdit">' . $rowZipCodes['county'] . '</label>
    <input type="text" class="hideOnLoad" size="15" maxlength="50" value="' . $rowZipCodes['county'] . '"
</td>
<td>
    <label class="hideOnEdit">' . $rowZipCodes['city'] . '</label>
    <input type="text" class="hideOnLoad" size="20" maxlength="50" value="' . $rowZipCodes['city'] . '"
</td>
<td>
    <label class="hideOnEdit">' . $rowZipCodes['zipCodes'] . '</label>
    <textarea class="hideOnLoad">' . $rowZipCodes['zipCodes'] . '</textarea>
</td>

您可以通过类看到我希望某些元素在页面加载时隐藏，并且这些元素将显示在编辑上。这行 jQuery 正确隐藏了“hideOnLoad”类元素:

$('.hideOnLoad').hide();

然后，我有 javascript 来检测何时单击“编辑”链接，并调用此函数:

function EditTableRow(linkClicked) {

var id = linkClicked.attr('name');

$('a.hideOnEdit').fadeOut(500);
$('input.hideOnEdit').fadeOut(500);
$('textarea.hideOnEdit').fadeOut(500);

$('input.hideOnLoad').fadeIn(500);
$('textarea.hideOnLoad').fadeIn(500);
}

我一写出这个函数就知道它看起来不对，但我不知道如何实现我需要做的事情。

我非常感谢任何人就如何按照描述的方式进行这项工作的建议!

Answer 1

首先，您不想在页面加载时调用 $('.hideOnLoad').hide(); 。您将面临用户短暂看到这些字段的风险。而是添加以下 CSS。这更有可能在用户看到任何内容之前生效(但不能保证，除非它是内联的)。

.hideOnLoad { display: none; }

至于您的 EditTableRow 方法，您将在所有内容上运行它，而不是在给定行的范围内运行。尝试这样的事情:

function EditTableRow(linkClicked) {
    var row = linkClicked.closest('tr');

    tr.find('.hideOnEdit').fadeOut(500);
    tr.find('.hideOnLoad').fadeIn(500);
}