[英]How to hide and show elements in table row to allow in-line editing
I'm trying to implement in-line editing of table data that is generated via php. 我正在尝试对通过php生成的表数据进行行内编辑。
Here's the php code that generates a row 这是生成一行的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>
You can see by the classes that I want certain elements to hide on page load and those elements will be shown on Edit. 您可以通过类看到我希望某些元素在页面加载时隐藏,这些元素将显示在“编辑”中。 This line of jQuery properly hides the "hideOnLoad" classes elements: 这行jQuery正确隐藏了“ hideOnLoad”类元素:
$('.hideOnLoad').hide();
Then, I have javascript to detect when the Edit link is clicked and I call this function: 然后,我可以使用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);
}
I knew as soon as I wrote the function that it didn't seem right, but I'm not sure how to implement what I need to do. 编写该函数似乎不正确后,我就知道了,但是我不确定如何实现我需要做的事情。
I'd appreciate anyone's suggestions on how to make this work as described! 我会很感激任何人对如何按照说明进行这项工作的建议!
First thing's first, you don't want to call $('.hideOnLoad').hide();
首先,您不想调用$('.hideOnLoad').hide();
when the page loads. 页面加载时。 You run the risk of the user seeing the fields for a brief period. 您冒着使用户短暂查看字段的风险。 Instead add the following CSS. 而是添加以下CSS。 This is more likely to take effect before the user sees anything (but not guaranteed unless it's inline). 这更有可能在用户看到任何内容之前生效(但不能保证,除非是内联的)。
.hideOnLoad { display: none; }
As for your EditTableRow
method, you're running it on everything rather than within the scope of the given row. 至于您的EditTableRow
方法,您正在所有对象上运行它,而不是在给定行的范围内运行它。 Try something like this: 尝试这样的事情:
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();
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.