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

Answer 2

在以下后再添加一行：

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

忽略特定的TD元素

2 个答案: