javascript - 忽略特定的 TD 元素

Question

下面是允许我内联编辑表格行的代码。但是，它会编辑该行中的所有 TD。我的问题以及代码如下所述。任何帮助表示赞赏。

<tbody> 

    <tr> 
        <th scope="row">Test</th>
        <td class="amount">$124</td>
        <td class="amount" id="" >$154</td>
        <td class="diff">- 754</td>

    </tr>

</tbody> 

上表只是一个示例。我一直试图完成的是，简单地编辑该特定行中的 TD，但我需要它来忽略 diff TD。

我是 jQuery 的新手，在 jQuery 书籍的帮助下获得了以下代码。

$(document).ready(function() {
  TABLE.formwork('#current-expenses');
});

var TABLE = {};

TABLE.formwork = function(table){
  var $tables = $(table);

  $tables.each(function () {
    var _table = $(this);
    _table.find('thead tr').append($('<th class="edit">&nbsp;</th>'));
    _table.find('tbody tr').append($('<td class="edit"><input type="button" value="Edit"/></td>'))
  });

  $tables.find('.edit :button').live('click', function(e) {
    TABLE.editable(this);
    e.preventDefault();
  });
}

TABLE.editable = function(button) {

  var $button = $(button);
  var $row = $button.parents('tbody tr');
  var $cells = $row.children('td').not('.edit');


  if($row.data('flag')) { // in edit mode, move back to table
    // cell methods
    $cells.each(function () {
      var _cell = $(this);
      _cell.html(_cell.find('input').val());
    })

    $row.data('flag',false);
    $button.val('Edit');
  }
  else { // in table mode, move to edit mode
    // cell methods
    $cells.each(function() {
      var _cell = $(this);
      _cell.data('text', _cell.html()).html('');
   if($('td.diff')){
      var $input = $('<input type="text" />')
        .val(_cell.data('text'))
        .width(_cell.width() - 16);

      _cell.append($input);
   }
    })

    $row.data('flag', true);
    $button.val('Save');
  }
}

我曾尝试更改代码，使其忽略 diff 类 TD，但到目前为止还没有成功。

Answer 1

替换

var $cells = $row.children('td').not('.edit');

与

var $cells = $row.children('td').not('.edit').not('.diff');