动画添加一个表行(JavaScript + jQuery)

Animating adding a table row (JavaScript + jQuery)

本文关键字：JavaScript jQuery 一个 动画 添加      更新时间：2023-09-26

我已经编写了一些代码来添加一个表行，如下所示。

function addRow(pos) {
// Insert new HTML table row
var tblObj = document.getElementById('questionTbl');
var newRow = tblObj.insertRow(pos + 1);  
// Add new table cells
var newCell1 = newRow.insertCell(0);
newCell1.innerHTML = 'one';
var newCell2 = newRow.insertCell(1);
newCell2.innerHTML = 'two';
var newCell3 = newRow.insertCell(2);
newCell3.innerHTML = 'three';
var newCell4 = newRow.insertCell(3);
newCell4.innerHTML = 'four';
var newCell5 = newRow.insertCell(4);
newCell5.innerHTML = 'five';
var newCell6 = newRow.insertCell(5);
newCell6.innerHTML = 'six';
var newCell7 = newRow.insertCell(6);
newCell7.innerHTML = 'seven';

我已经添加了jQuery库，因为我想要一些我没有预见到的功能(否则我会在查询中添加行)。

newRow.id = "row_" + (pos + 1);
newRow.className = "hide";
$(document).ready(function() {
    $("#row_" + (pos + 1)).switchClass("hide", "show-row");
});

行添加工作，但它不动画。它的出现有延迟(我猜这是动画所需的时间)。

有谁知道为什么动画不工作吗?

谢谢。

试试这个

$(document).ready(function() {
    $("#row_" + (pos + 1)).removeClass("hide").addClass("show-row").hide().show('slow');
});

试试这个:

function addRow(pos) {
    // Insert new HTML table row
    var tblObj = document.getElementById('questionTbl');
    var newRow = tblObj.insertRow(pos + 1);  
    // Add new table cells
    var newCell1 = newRow.insertCell(0);
    newCell1.innerHTML = 'one';
    var newCell2 = newRow.insertCell(1);
    newCell2.innerHTML = 'two';
    var newCell3 = newRow.insertCell(2);
    newCell3.innerHTML = 'three';
    var newCell4 = newRow.insertCell(3);
    newCell4.innerHTML = 'four';
    var newCell5 = newRow.insertCell(4);
    newCell5.innerHTML = 'five';
    var newCell6 = newRow.insertCell(5);
    newCell6.innerHTML = 'six';
    var newCell7 = newRow.insertCell(6);
    newCell7.innerHTML = 'seven';
    newRow.id = "row_" + (pos + 1);
    newRow.className = "hide";
    $("#row_" + (pos + 1)).switchClass("hide", "show-row");
}

$(document).ready(function() { ... }应该在需要代码在DOM准备好被操作时立即执行时使用，基本上传递给ready函数的函数在页面加载时执行。原来的jQuery代码永远不会执行，因为在ready事件已经被触发后，函数被附加到ready 事件。

相关文章：