2

最初にページが読み込まれると、テーブルは通常どおり表示されますが、編集ラベルをクリックすると、最初の名前の値がテキスト ボックスとして編集可能になります。値を入力して Enter キーを押すと、フォームが送信されます。これを達成する方法は本当に混乱しています。

これは私が持っているサンプル テーブルです。これを超えることはできませんでした。

<label id="edit" style="cursor:pointer; color:blue;">edit</label>

<table>
    <tr><td>First Name: </td>
        <td>John</td>
    </tr>
    <tr><td>Last Name: </td>
        <td>Wright</td>
    </tr>
</table>

jsfiddle

</p>

4

5 に答える 5

4

物事を複雑にしないでください。<td>テキストボックスで別のタグを追加して、非表示にします。<td>次に、ラベルをクリックしてバインドし、静的テキストで非表示にし、テキストボックスで表示するjsvascriptを追加します<td>。ところで、ここにラベルは必要ありません。それで<span>十分です。

于 2013-01-04T18:06:46.697 に答える
2

次のリンクをチェックしてください

Javascriptを使用してTextBoxを動的に作成し、コードビハインドでコントロール値を読み取る方法

于 2013-01-04T18:05:15.857 に答える
2 
$('#edit').click(function() {
    var $table = $('table');
    if ($table.find('input').length) return;
    $table.find('td:nth-child(2)').html(function(i, v) {
        return '<input value=' + v + '>';
    })
})

$('table').on('blur', 'input', function() {
    $('table input').replaceWith(function() {
        return this.value;
    })
})

http://jsfiddle.net/cnuDh/

于 2013-01-04T18:08:44.227 に答える
1

contentEditableこれは、HTML5 および JavaScriptkeyPressイベントのサポートを使用して行うことができます。このリンクhttp://jsfiddle.net/rdRWC/8/を試してください。

HTML

<div id="edit" style="border:1px solid #ccc" contenteditable="true" onkeypress="submitForm(event,this)">edit</div>

JS

   function submitForm(e , t){
    var keyPressed = e.which;
if(e.which == 13){  //Pressed Enter Key
      alert("Do your Form Submittion Here");
   }

}

于 2013-01-04T18:12:39.727 に答える
0

ユーザーがクリックしたときにテキストボックスを作成する代わりに、CSSを使用してテキストボックスを非表示にする必要があります

display: none

次に、ユーザーがクリックしたら、次のように呼び出します。

$('#textboxid').show();

テキストボックスを動的に作成することをお勧めしない理由は、HTMLの作成は、テキストボックスを表示および非表示にするよりも難しく、保守が難しいためです。

于 2013-01-04T18:05:40.987 に答える