Анимация добавления строки таблицы (JavaScript + jQuery) - PullRequest
Новая
       3

Анимация добавления строки таблицы (JavaScript + jQuery)

1 голос
/ 05 августа 2011

Я написал некоторый код для добавления строки таблицы, которую вы можете увидеть ниже. 

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

Добавление строки работает, но оно не анимируется. Появляется задержка его появления (которое, я думаю, будет временем, которое требуется для анимации).

Кто-нибудь знает, почему не работает анимация?

Спасибо.

Ответы [ 2 ]

1 голос
/ 05 августа 2011

Попробуйте это 

$(document).ready(function() {
    $("#row_" + (pos + 1)).removeClass("hide").addClass("show-row").hide().show('slow');
});
0 голосов
/ 05 августа 2011

Попробуйте это: 

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 готов к работе, в основномфункция, переданная функции готовности, выполняется при загрузке страницы. Исходный код jQuery никогда не будет выполняться, поскольку функция была присоединена к событию готовности после того, как событие готовности уже было запущено.

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

...