0

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

関数を書いた途端、正しくないように見えることはわかりましたが、必要なことをどのように実装するかがわかりません。

説明されているようにこれを機能させる方法について誰かの提案をいただければ幸いです。

4

2 に答える 2

2

$('.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-19T19:01:08.860 に答える
0 
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-19T19:04:09.843 に答える