Question

我已经写了一些代码来添加一个表行，你可以在下面看到。

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");
});

添加行有效，但它没有动画效果。它出现延迟（我想这将是动画制作所需的时间）。

有谁知道为什么动画不起作用？

感谢。

Answer 1

试试这个

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

Answer 2

试试这个：

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事件。

http://api.jquery.com/ready/

动画添加表格行（JavaScript + jQuery）

2 个答案: