Question

使用table删除时，我会动画jquery行向上滑动，这在FF，Safari和Chrome中很酷。但惊喜，惊喜...... !!它在IE8中不起作用。最糟糕的是IE8没有显示任何错误，所以我应该如何调试。

我也知道table在影响方面存在问题。这就是为什么我使用tr将div替换为replaceWith()。

这是我的jquery：

$('.remove').live('click', removeRowSlider);

function removeRowSlider(e){
  var thisElem = $(this);

  if( thisElem.hasClass('remove') ){
    var tr = thisElem.closest('tr').parents('tr'),
            supportDiv = $('<div style="height: 30px; width: 470px">').css({'height': tr.height()});

    tr.animate({'opacity': 0.2}, function(){
        tr.replaceWith(supportDiv);

        supportDiv.slideUp(400, function(){
            $(this).remove();               
        });

    });

  }

  e.preventDefault();
}

HTML：

<table>
    <thead>
    <tr>
        <th class="first-td">Item(s)</th>
      <th class="qty-col">Qty</th>
      <th class="price-col">Price</th>
      <th class="price-col">Subtotal</th>
      <th class="del-opt">Delivery options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td colspan="4">
        <table>
            <tr>
            <td class="first-td">
                <img src="../assets/product-image.jpg" alt="product image" />
              <div class="prod-desc-col">
                <h3>Samsung LE40C580J1 LCD HD 1080p </h3>
              </div>
            </td>
            <td class="qty-col">
                <input type="text" value="1" />
              <a href="#" title="Update" class="update">Update</a> 
              <a href="#" title="Remove" class="remove">Remove</a>
            </td>
            <td class="price-col">&pound;12223.00</td>
            <td class="price-col">&pound;12223.00</td>
          </tr>
        </table>
      </td>
      <td>
        <ul class="font-small">
          <li class="coll-store">
            <p>Collect from store</p>
          </li>
          <li class="uk-del">
            <p>Delivery to UK</p>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
        <td colspan="4">
        <table>
            <tr>
            <td class="first-td">
                <img src="../assets/product-image.jpg" alt="product image" />
              <div class="prod-desc-col">
                <h3>Samsung LE40C580J1 LCD HD 1080p </h3>
              </div>
            </td>
            <td class="qty-col">
                <input type="text" value="1" />
              <a href="#" title="Update" class="update">Update</a> 
              <a href="#" title="Remove" class="remove">Remove</a>
            </td>
            <td class="price-col">&pound;12223.00</td>
            <td class="price-col">&pound;12223.00</td>
          </tr>
        </table>
      </td>
      <td>
        <ul class="font-small">
          <li class="coll-store">
            <p>Collect from store</p>
          </li>
          <li class="uk-del">
            <p>Delivery to UK</p>
          </li>
        </ul>
      </td>
    </tr>
    <tr>
        <td colspan="4">
        <table>
            <tr>
            <td class="first-td">
                <img src="../assets/product-image.jpg" alt="product image" />
              <div class="prod-desc-col">
                <h3>Samsung LE40C580J1 LCD HD 1080p </h3>
              </div>
            </td>
            <td class="qty-col">
                <input type="text" value="1" />
              <a href="#" title="Update" class="update">Update</a> 
              <a href="#" title="Remove" class="remove">Remove</a>
            </td>
            <td class="price-col">&pound;12223.00</td>
            <td class="price-col">&pound;12223.00</td>
          </tr>
        </table>
      </td>
      <td>
        <ul class="font-small">
          <li class="coll-store">
            <p>Collect from store</p>
          </li>
          <li class="uk-del">
            <p>Delivery to UK</p>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

感谢您的帮助......

Answer 1

说到IE，没什么可惊讶的！我不知道这是否适用于您的示例，但有时我在添加没有结束标记的元素时遇到了问题。所以你可以试试这个：

supportDiv = $('<div style="height: 30px; width: 470px;"></div>')...

希望它适合你！

jquery animate（）和slideUp（）在IE8中不起作用

1 个答案: