Javascript 如何隐藏和显示表行中的元素以允许在线编辑

我试图实现通过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>

然后，我使用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);
}

我一写函数就知道它似乎不正确，但我不确定如何实现我需要做的事情

---

我很感激任何人对如何使这项工作的建议所描述的

首先，您不想调用

$（'.hideOnLoad'）.hide（）当页面加载时。用户可能会在短时间内看到这些字段。而是添加以下CSS。这更有可能在用户看到任何东西之前生效（但除非是内联的，否则不能保证生效）

至于您的
EditTableRow
方法，您在所有内容上运行它，而不是在给定行的范围内。试着这样做：

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

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

HTML
价值
JS
$（'td'）。在（'click'，function（）上{
$（'input'，$（this））.show（）；
$（'label'，$（this））.hide（）；
});
$（'input'）。在（'blur'，function（）上{
var val=$（this.val（）；
$（this.previous（'label'）.html（val.show（）；
$（this.hide（）；
})
与其生成非常繁重的硬编码输入，为什么不单击生成它们，并让它们替换单元格的内容？@dystroy：我想了一下，但不确定哪一个在实现方面比您所说的“沉重”更好。是的，我没有提到，但是，正如您所描述的，我最初使用CSS隐藏元素。不过，这就是解决办法。我不得不做一些轻微的调整：var row=linkClicked.parent（）.parent（）；行查找（'.hideOnEdit'）.fadeOut（500）；行.find（'.hideOnLoad'）.delay（500）.fadeIn（500）；谢谢你，弗莱姆！
.hideOnLoad { display: none; }

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

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

HTML
<td>
    <label>value</label>
    <input id="val1" type="text" value="value">
</td>

JS
$('td').on('click', function(){
     $('input',$(this)).show();
     $('label',$(this)).hide();
});

$('input').on('blur', function(){
    var val = $(this).val();
    $(this).previous('label').html(val).show();
    $(this).hide();
})