Question

Fiddle Example

我已经阅读了关于在删除行之后更新表的旧线程（here）。一般方法是使用.trigger('update').trigger("appendCache").trigger("applyWidgets")。但是，由于行将在排序时返回，因此无法正常工作。在示例中，它只添加了editable小部件。谁能告诉我为什么触发器不起作用？

var options = {
        theme: 'default',
        widgets: ['editable'],
        widgetOptions : {
          editable_columns       : [0,1,2],      
          editable_enterToAccept : true,          
          editable_autoAccept    : true,          
          editable_autoResort    : false,         
          editable_validate      : null,         
          editable_noEdit        : 'no-edit',     
          editable_editComplete  : 'editComplete'
       }
}
$('.tablesorter2').tablesorter(options).children('tbody').on('editComplete','td', function(event, config){
    var $this = $(this),
        tr = $this.parent('tr'),
        $allRows = config.$tbodies.children('tr'), 
        tid = tr.data('tid'),
        input="",
        name = $(this).data('name'),
        newContent = $(this).text();
        input = '<input value="'+newContent+'" name="'+name+'[]" type="hidden">';

        $this.find('.j_input').html(input);
    });

$('button').click(function(){
     $('input:checked').closest('tr').remove();
     $('tablesorter2').trigger('update').trigger("appendCache").trigger("applyWidgets");
});

HTML：

<button>Del</button>
<table class="tablesorter2">
    <thead>
    <tr data-tid='12'>
        <th>Name</th>
        <th>Age</th>
        <th>Conditions</th>
        <th>Notes</th>
        <th>Del</th>
    </tr>
    </thead>
    <tbody>
        <tr data-tid='13'>
            <td><div>Peter</div></td>
            <td contenteditable="true" data-name='age'>18<span class='j_input'></span></td>
            <td contenteditable="true" data-name='conditions'>Good<span class='j_input'></span></td>
            <td contenteditable="true" data-name='notes'>...<span class='j_input'></span></td>
            <td><input type='checkbox'/></td>
        </tr>
         <tr>
            <td>Tom</td>
            <td data-name='age'>12<span class='j_input'></span></td>
            <td contenteditable="true" data-name='conditions'>Good<span class='j_input'></span></td>
            <td contenteditable="true" data-name='notes'>On medication<span class='j_input'></span></td>
            <td><input type='checkbox'/></td>
        </tr>
    </tbody></table>

Answer 1

上面代码的问题是tablesorter2前面没有句点.，因此选择器被破坏了。此外，您只需要触发更新。

$('button').click(function(){
     $('input:checked').closest('tr').remove();
     $('.tablesorter2').trigger('update');
});

这是working demo。

删除tablesorter中的行后触发更新

1 个答案: