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的{{1}}时，我想删除该列中的内容，然后将第2列中的所有数据移至第1列，将第3列移至第2列。

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

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

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

Answer 1

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

下面，我已经在页面上展示了多个表格的此功能。

＆＃13;

$(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 />');
      
    });

  });
  
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

更好的方法是隐藏列。像这样：

$(function(){
    $("table").on("click", '[data-toggle="compare-remove"]', function( event ) {
        event.preventDefault();

        var e = $(this).parents('td').index(), i;

            i = e+1;

          $("table td:nth-child(" + i + ")").hide();

    });
});

fiddle

删除后向前移动列

2 个答案: