如何隱藏和顯示錶格中的元素以允許在線編輯

我試圖實現通過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); 
}

我儘快知道因爲我寫的功能看起來不太合適，但我不確定如何實現我需要做的事情。

我很感謝任何人對如何使這項工作如上所述的建議！

來源

2013-01-19 marky

而不是產生硬編碼輸入，這是非常沉重的，爲什麼不產生他們點擊讓他們更換單元格的內容？ –

@dystroy：我想到了這一點，但並不確定哪種方法在實現方面比「沉重」更好，就像你說的那樣。 – marky

首先，您不想在頁面加載時調用$('.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); 
}

來源

2013-01-19 19:01:08

是的，我沒有提到它，但我最初用CSS描述了隱藏元素。雖然這是解決方案。我不得不做一些微小的調整： var row = linkClicked.parent（）。parent（）; row.find（'。hideOnEdit'）。fadeOut（500）; row.find（'。hideOnLoad'）。delay（500）.fadeIn（500）; 謝謝，弗萊姆！ – marky

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(); 
})

來源

2013-01-19 19:04:09

如何隱藏和顯示錶格中的元素以允許在線編輯

回答

相關問題