Cet article décrit la méthode de JS pour mettre en œuvre des lignes de table de haut en bas. Partagez-le pour votre référence, comme suit:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <éad> <méta http-equiv = "contenu-type" contenu = "text / html; charset = gb2312" /> <ititle> Table Row Movement </ title> </ head> <pody> <pally> <Tbody> <td> 11 </td> <td> <a href = "javascript: void (0)" onclick = "movup (this)"> move up </a> </td> <td> <a href = "javascript: void (0)" onclick = "movywen (this)"> déménage </a> </td> <td> 22 </td> <td> <a href = "javascript: void (0)" onclick = "movup (this)"> move up </a> </td> <td> <a href = "javascript: void (0)" onclick = "movyway <td> 33 </td> <td> <a href = "javascript: void (0)" onclick = "movup (this)"> move up </a> </td> <td> <a href = "javascript: void (0)" onclick = "movywen (this)"> déménage </a> </td> <td> 44 </td> <td> <a href = "JavaScript: void (0)" onclick = "movup (this)"> move up </a> </td> <td> <a href = "javascript: void (0)" onclick = "movywen (this)"> déménage </a> </td> <td> 55 </td> <td> <a href = "javascript: void (0)" onclick = "movup (this)"> move up </a> </td> <td> <a href = "javascript: void (0)" onclick = "movywen (this)"> déménage </a> </td> type = "text / javascript"> <! - fonction movup (_a) {var _row = _a.parentNode.parentNode; // Si ce n'est pas la première ligne, échangez l'ordre avec la ligne précédente var _node = _row.PreviousSibling; while (_node && _node.nodeType! = 1) {_Node = _Node.PreviousSibling; } if (_Node) {swapNode (_row, _Node); }} fonction émouvant (_a) {var _row = _a.parentNode.parentNode; // Si ce n'est pas la dernière ligne, échangez l'ordre avec la ligne suivante var _node = _row.NextSibling; while (_node && _node.nodeType! = 1) {_Node = _Node.NextSibling; } if (_Node) {swapNode (_row, _Node); }} fonction swapnode (node1, node2) {// Obtenez le nœud parent var _parent = node1.parentNode; // Obtenez la position relative des deux nœuds var _t1 = node1.nextsibling; var _t2 = node2.NextSibling; // insérer Node2 à la position node1 d'origine if (_t1) _parent.insertBefore (Node2, _t1); else _parent.appendChild (Node2); // insérer Node1 à la position node2 d'origine if (_t2) _parent.insertBefore (Node1, _t2); else _parent.appendChild (Node1);} // -> </cript> </body> </html>La capture d'écran de l'effet de course est la suivante:
Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des compétences en algorithme de recherche JavaScript", "Résumé de la structure de données et des techniques de la structure de données JavaScript", "Résumé des techniques de fonctionnement json Effets et techniques de l'animation JavaScript "," Résumé des erreurs JavaScript et des techniques de débogage "et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.