1

データベース付きのテーブルがあります。ここにテーブル付きのコードがあります：link 値を更新したいセルをクリックしたい。セルには次のようなクラスが必要です。

.edittd
{
 display:none
}

セルをクリックすると、クラスは次のようになります。

.edittd
{
font-size:14px;
width:200px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}

これにより、セルがより大きく、より目立つようになります。

次に、新しい値を入力してフィールドの外側をクリックすると、値が更新されます。

私は以下のようにそれをやろうとしました：

$('tr').click(function(){ 
    $('#display').html(this.id); 
    $('td',this).attr('class').toggleClass('edittd');
});​

また、通常のセル（td）を入力フィールドに変換し、更新後に通常のセルに戻す方法もわかりません。

4

5 に答える 5

0

次のことを試してください。

$('td').click(function(e){
    var txt = $(this).text();
    $(this).replaceWith('<input class="edited" type="text" value="' + txt + '" />');
})
于 2012-05-24T11:07:02.283 に答える
0

サンプル HTML コード...

<tr id="5" class="edit_tr">
<td width="50%" class="edit_td">
<span id="first_5" class="text" style="display: inline; ">Priyank</span>
<input type="text" value="Priyank" class="editbox" id="first_input_5" style="display:    none; ">
</td>
<td width="50%" class="edit_td">
<span id="last_5" class="text" style="display: inline; ">Patel</span> 
<input type="text" value="Patel" class="editbox" id="last_input_5" style="display: none;  ">
</td>
</tr>

Javascript コード:

$(".edit_tr").click(function(){
    var ID=$(this).attr('id');
    $("#first_"+ID).hide();
    $("#last_"+ID).hide();
    $("#first_input_"+ID).show();
    $("#last_input_"+ID).show();
});
于 2012-05-24T10:07:07.210 に答える
0

マークアップを無効にする td を置き換える代わりに、inputfield を子として追加するだけです。

あなたに出発点を与えるために、私はあなたの例を編集しました

保存後、入力フィールドとクラスを削除しますedittd。

注: クラスを切り替える正しい呼び出しは次のとおりです。$('td').toggleClass('edittd');

于 2012-05-24T10:08:11.367 に答える
0

このプラグインは次のように使用できます: PLUGIN

また

プラグイン 2 :リンク

$('table.myTable').inplacerowedit({


    url: /Some/URL',
        inputs: {
            '0': { type: 'datepicker', name: 'OpenDate' },
            '1': { type: 'datepicker', name: 'CloseDate' },
            '2': { type: 'text', name: 'Cost' },
            '3': { type: 'text', name: 'Description' }
        }
});
于 2012-05-24T10:08:22.587 に答える
0

セリューションを見つけました。セリューションには、セルに 2 つの要素 (td タグ) が含まれています。1 - 1 つの要素がスパンです。2 - secend 要素は入力フィールドです。通常モードではスパンが表示され、入力フィールドは非表示になります。編集モードでは、スパンが非表示で入力フィールドが表示されることを意味する alemnt の属性に反対します。selution jsfiddleのリンクを クリックすると、セル名「colume1」をクリックしてから編集できます。テーブルの外側をクリックすると、新しい値が残ります。コード：

var COLUME, VAL;
$('td').click(function() {
    COLUME = $(this).attr('id');
    $('#displaycolumeid').html(COLUME);
    $('#colume1').hide();
    $('#inputName').show();

});


$(".edittd").mouseup(function() {
    return false
});


$(document).mouseup(function() {
    $('#colume1').show();
    $('#inputName').hide();
    VAL = $("#inputName").val();
    $("#colume1").html(VAL); 
});​

CSS:

.edittd
{
font-size:14px;
width:200px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.display{
background:red;
    width:110px;
}

ありがとう..

</p>

于 2012-05-24T18:50:30.687 に答える