4

我的页面中有一个表格，如下所示。

<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为。然后该字段可以更改为输入，使用户能够更改文本。如果用户再次单击（以前），则行中的文本可能会更新，如果用户单击（以前是 #），则该行可能会回到以前的状态。（就像确定和取消一样）。yybb<td class="xx">#</td><td class="aa">#</td><td class="xx">#</td><td class="bb">#</td>

这是小提琴。

我怎样才能做到这一点？我更喜欢更简单、更快的解决方案。

4

2 回答 2

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'));
       });
    });

演示

于 2012-06-03T07:27:19.570 回答
0

如果你想继续上课，试试这个 fiddle。

我已经使用事件委托.live()来与您的班级更改保持一致。

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

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

于 2012-06-03T08:31:24.540 回答