Tabellenzeilen mit JS randomisieren, während jeweils eine Tabellenzeile angezeigt wird

Question

Ich versuche eine Tabelle zu erstellen, die nur eine Zeile gleichzeitig anzeigt und bei jeder Aktualisierung zufallsgesteuert wird. Hier ist mein Code:

<script> 
var maxRows = 1; //displays one row at a time 
$('#song-list').each(function() { 
var cTable = $(this); 
var cRows = cTable.find('tr:gt(0)'); 
var cRowCount = cRows.size(); 

if (cRowCount < maxRows) { 
    return; 
} 

/* hide all rows above the max initially */ 
cRows.filter(':gt(' + (maxRows - 1) + ')').hide(); 

var cPrev = cTable.siblings('.prev'); 
var cNext = cTable.siblings('.next'); 

/* start with previous disabled */ 
cPrev.addClass('disabled'); 

cPrev.click(function() { 
    var cFirstVisible = cRows.index(cRows.filter(':visible')); 

    if (cPrev.hasClass('disabled')) { 
     return false; 
    } 

    cRows.hide(); 
    if (cFirstVisible - maxRows - 1 > 0) { 
     cRows.filter(':lt(' + cFirstVisible + '):gt(' + (cFirstVisible - maxRows - 1) +  ')').show(); 
    } else { 
     cRows.filter(':lt(' + cFirstVisible + ')').show(); 
    } 

    if (cFirstVisible - maxRows <= 0) { 
     cPrev.addClass('disabled'); 
    } 

    cNext.removeClass('disabled'); 

    return false; 
}); 

cNext.click(function() { 
    var cFirstVisible = cRows.index(cRows.filter(':visible')); 

    if (cNext.hasClass('disabled')) { 
     return false; 
    } 

    cRows.hide(); 
    cRows.filter(':lt(' + (cFirstVisible +2 * maxRows) + '):gt(' + (cFirstVisible +  maxRows - 1) + ')').show(); 

    if (cFirstVisible + 2 * maxRows >= cRows.size()) { 
     cNext.addClass('disabled'); 
    } 

    cPrev.removeClass('disabled'); 

    return false; 
}); 
}); 
</script> 

zweiten Stück Code:

<script> 
Array.prototype.shuffle = function() { 
for (var i = 0; i < this.length; i++) { 
// Random item in this array. 
var r = parseInt(Math.random() * this.length); 
var obj = this[r]; 

// Swap. 
this[r] = this[i]; 
this[i] = obj; 
} 
} 

function randomize(tableID) { 
var myTable = document.getElementById(tableID); 
var myRows = new Array(); 
for (i=myTable.rows.length-1; i>=0; i--) { 
    var theRow = myTable.rows[i]; 
    myRows.push(theRow); 
    theRow.parentNode.removeChild(theRow); 
} 
myRows.shuffle(); 
for (j=0; j<myRows.length; j++) { 
    myTable.appendChild(myRows[j]); 
} 
} 
window.onload = function() { 
randomize("song-list"); 
} 
//--> 
</script> 

Beide Stücke funktionieren auf ihre eigenen, aber wenn ich versuche, sie zu kombinieren die Randomize-Funktion ersetzt den anderen Code und ich eine lange Liste von tr, die nach dem Refresh randomisieren.

Ich weiß, dass ich etwas tun kann, damit diese Codes miteinander übereinstimmen.

Haben Sie irgendwelche Vorschläge?

Answer 1

legte den ganzen ersten Codeblock in eine Funktion:

function showOneRow() { 
    ... 
} 

und es nach randomize nennen:

window.onload = function() { 
    randomize("song-list"); 
    showOneRow(); 
}