Question

我的页面中有一张表格如下。

<table id="tbl">
  <tr>
    <td class="field" id="field1s">field1x</td>
    <td class="field" id="field2s">field2x</td>
    <td class="field" id="field3s">field3x</td>
    <td class="field" id="field4s">field4x</td>
    <td class="xx">#</td>
    <td class="yy">#</td>
  </tr>
</table>

行中字段的文本将更改为<td class="xx">字段中的输入，并在下次单击时更新。这很好用。但是，当用户首次点击xx时，我希望课程aa更改为yy和bb更改为<td class="xx">#</td>。然后该字段可以更改为输入，使用户能够更改文本。如果用户再次单击<td class="aa">#</td>（之前为<td class="xx">#</td>），则行中的文本可能会更新，如果用户单击<td class="bb">#</td>（之前为＃），则该行可能会返回到先前的状态。（就像OK和CANCEL一样）。

Here是小提琴。

我该怎么做？我更喜欢更简单，更快速的解决方案。

Answer 1

使用jQuery .data()，您可以轻松解决它。我认为你不需要改变课程。

   $('#tbl .xx').toggle(
      function() {
        $(this).siblings('.field').each(function(){
          var t = $(this).text();
          $(this).data('prev', t);
          $(this).html($('<input />',{'value' : t}));
        });
      },
      function() {
        $(this).siblings().each(function(){
          var inp = $(this).find('input');
          if (inp.length){
            $(this).text(inp.val());
          }
        });
      }    
    );


    $('#tbl .yy').click(function() {
      $(this).siblings('.field').each(function(){
            $(this).text($(this).data('prev'));
       });
    });

<强> DEMO

Answer 2

如果您想保留课程，请尝试this fiddle。

我已使用事件委派.live()来保持与课程更改的一致性。

应移除.toggle以防止出现一些错误 - 例如在codeparadox的答案中，如果单击编辑按钮后跟取消按钮，则编辑按钮中的下一次单击将触发错误的功能。

如果您在页面中使用jQuery 1.7+，请不要忘记将.live()替换为.on()。

jQuery更改单元类并更新数据

2 个答案: