Question

我正在开发一个应用程序，因为我创建了一个4x4表。我已编写代码来添加表格行： -

var row = table.insertRow(rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);

要删除该行，我的代码为：

$('#rowid')
.children('td')
.animate({
    height: 0
},205,'')
.wrapInner('<div />')
.children()
.slideUp({
    duration: 205, 
    easing: '', complete: function()
    {
        $(this).closest('tr').remove();
    }
});

在应用中，用户一次可以看到4行。当用户点击彩色单元格时，将从顶部删除一行，并在底部添加一行。如果他一直点击彩色单元格，那么通过上述过程，它应该给用户一种滚动效果。但是使用上面的代码，滑动效果并不顺畅。

请告诉我们如何加快滚动效果并使其看起来像连续效果。

Answer 1

动画表格元素有点棘手。如果您没有被迫使用TABLE，UL将使您的生活更轻松。

JSBIN：http://jsbin.com/minekaquye/1/edit?js,output

这是你正在寻找的效果吗？

HTML：

  <ul class="list">
    <li class="list__element">Element</li>
    <li class="list__element">Element</li>
    <li class="list__element">Element</li>
    <li class="list__element">Element</li>    
  </ul>

JS：

$('.list__element').on('click', modifyList);

function modifyList(e) {

  // Delete li
  deleteRow('.list__element:first-child');

  // Add a new li
  addRow('.list');

}


function deleteRow(target) {

  $(target).slideUp(300, function(){
    $(this).remove();
  });  

}

function addRow(target) {

  var $target = $(target),
      html = '<li class="list__element" style="display:none;">Element</li>';

  $target
    .append(html)
    .find('li:last-child')
    .on('click', modifyList)
    .slideDown(300);

}

CSS：

.list {
  list-style:none;
  padding:0;
  margin:0;
}

.list__element {
  background-color:#CCC;
  padding:10px;
}

.list__element:first-child {
  background-color:red;
}

如何在javascript中同时添加和删除表中的行

1 个答案: