jquery - 删除后向前移动列

Question

我有一个看起来像这样的简单表格

<table class="table table-striped">
 <tr>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
 </tr>
 <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
   <tr>
    <td>Adam</td>
    <td>Smith</td>
    <td>941</td>
  </tr>
</table> 

当我点击x时第一 <td>我想删除该列中的内容，然后将第 2 列中的所有数据移至第 1 列，将第 3 列中的所有数据移至第 2 列。

当我点击x时第二个<td>我想删除该列中的内容，然后将第 3 列中的所有数据移至第 2 列。

到目前为止，我的删除部分正常工作，但似乎无法克隆该列并移动它。这是我的Fiddle到目前为止我所做的事情。

这个想法是始终显示 3 列，但只是向前移动数据。并将删除的列留空

Answer 1

我的概念是识别被单击的列的索引，然后对于每一行，删除该索引处的单元格并将空白替换单元格附加到该行的末尾。

下面，我通过页面上的多个表格演示了此功能。

$(function() {

  // selector for all tables on the page
  var $tables = $('table');

  // define the click handler
  $tables.on('click', '[data-toggle="compare-remove"]', function(event) {
    event.preventDefault();
    
    // define the clicked element,
    // the clicked table (this code works for multiple independent tables),
    // and index of the clicked column
    var $this=$(this),
        $this_table=$this.closest('table'),
        col_index = $this.parent('td').index();

    // iterate through all rows of the clicked table
    $('tr', $this_table).each(function() {

      // define the current row
      var $this_row=$(this);
      
      // remove the cell at the specified column index
      $this_row.find('td').eq(col_index).remove();
      
      // add a blank cell to the end of the row
      $this_row.append('<td />');
      
    });

  });
  
});

table,td {
  border: 1px solid black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-striped">
  <tr>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
  </tr>
  <tr><td>Jill</td><td>Smith</td><td>50</td></tr>
  <tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
  <tr><td>Adam</td><td>Smith</td><td>941</td></tr>
</table>

<table class="table table-striped">
  <tr>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
    <td><a href="javascript:void(0)" data-toggle="compare-remove">x</a></td>
  </tr>
  <tr><td>Jill</td><td>Smith</td><td>50</td></tr>
  <tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
  <tr><td>Adam</td><td>Smith</td><td>941</td></tr>
</table>