javascript - jQuery 更改单元格类并更新数据

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"> 上的输入字段并在下次点击时获得更新。这很好用。但我想要类(class) xx更改为 aa和 yy至 bb当用户第一次点击 <td class="xx">#</td> .然后该字段可能会更改为输入，使用户能够更改文本。如果用户再次点击 <td class="aa">#</td> (以前是 <td class="xx">#</td> )，行中的文本可能会更新，如果用户单击 <td class="bb">#</td> (以前是 #)，该行可能会返回到以前的状态。 (就像确定和取消一样)。

Here是 fiddle 。

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

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