3

私はいくつかの編集可能なテーブルプラグインを調べましたが、それらが私のニーズに本当に必要かどうかはわかりません。私がやりたいのは、td要素をクリックして現在の値を取得し、td htmlを入力+ボタンに変更し、ボタンが押されたら、入力とボタンを削除して、新しいテキストをtdに配置することだけです。これが私が持っているもので、まったく機能していません。tdをクリックすると、テーブル全体が非表示になり、入力に置き換えられます。

これがJSです：

    var selectedObj;

  $('td').click(function(e){
      // Handle the click

     if ($('#currentInput').length == 0)
     {
          selectedObj = $(this);
        var currentValue = $(this).text();
        var newValue = currentValue;

        $(this).html("<input id='currentInput' type='text' value='"+currentValue+"'/> <button onclick='setNewValue()'>Set</button>");
     }

  });
  function setNewValue()
  {
            var newValue = $('#currentInput').val();

        selectedObj.html('');
            selectedObj.text(newValue);
  }

そしてHTML：

<p> 
<table id='transitTable' border="0" cellspacing="2" cellpadding="2" class='display' width="400">
<tr id='1'>
<td class="etsHeader etsLeft">H1</td>
<td class="etsHeader etsLeft">H2</td>
<td class="etsHeader etsLeft">H3</td>
<td class="etsHeader etsLeft">H4</td></tr>
<tr id='2'>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td>
<td class="etsValue etsOdd etsLeft">R1</td></tr>
<tr id='3'>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td>
<td class="etsValue etsEven etsLeft">R2</td></tr></table></p>
4

2 に答える 2

8

contentEditable = trueを試してみませんか、

こちらで確認してください

于 2012-05-18T20:39:28.690 に答える
2

tdこれは、をそのコンテキストで無効なinputタグに置き換えているために発生します。

問題のあるコード

$(this).html("<input id='currentInput' type='text' value='"+currentValue+"'/> <button onclick='setNewValue()'>Set</button>");

値を別のタグにラップ.append()するtdか、ラップしてみてください。td

于 2012-05-18T20:37:41.793 に答える