3

我研究了几个可编辑的表格插件，但我不确定它们是否真的满足我的需求。我想要做的就是点击 td 元素，获取当前值，然后将 td html 更改为 input + 按钮，当按下按钮时，删除输入和按钮并将新文本放入 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 回答