![](/img/trans.png)
[英]How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?
[英]How to hide and show elements in table row to allow in-line editing
我正在嘗試對通過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);
}
編寫該函數似乎不正確后,我就知道了,但是我不確定如何實現我需要做的事情。
我會很感激任何人對如何按照說明進行這項工作的建議!
首先,您不想調用$('.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);
}
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.