下面是允许我内联编辑表格行的代码。但是,它会编辑该行中的所有 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"> </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,但到目前为止还没有成功。
最佳答案
替换
var $cells = $row.children('td').not('.edit');
与
var $cells = $row.children('td').not('.edit').not('.diff');
关于javascript - 忽略特定的 TD 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2891638/