บทความนี้อธิบายวิธีการของ JS ในการใช้แถวตารางขึ้นและลง แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
<! 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"> <head> <meta http-equiv = "content-ype" content = "text/html; charset = gb2312"/> <title> <td> 11 </td> <td> <a href = "javascript: void (0)" onclick = "moveup (นี่)"> เลื่อนขึ้น </a> </td> <td> <a href = "JavaScript: void (0) <td> 22 </td> <td> <a href = "javascript: void (0)" onclick = "moveup (นี่)"> เลื่อนขึ้น </a> </td> <td> <a href = "JavaScript: void (0) <td> 33 </td> <td> <a href = "javascript: void (0)" onclick = "moveup (นี่)"> เลื่อนขึ้น </a> </td> <td> <a href = "JavaScript: void (0) <td> 44 </td> <td> <a href = "javascript: void (0)" onclick = "moveup (นี่)"> เลื่อนขึ้น </a> </td> <td> <a href = "JavaScript: void (0) <td> 55 </td> <td> <a href = "javascript: void (0)" onclick = "moveup (นี่)"> เลื่อนขึ้น </a> </td> <td> <a href = "JavaScript: void (0) type = "text/javascript"> <!-ฟังก์ชั่น moveup (_a) {var _row = _a.parentNode.parentNode; // ถ้าไม่ใช่บรรทัดแรกให้สลับลำดับด้วยบรรทัดก่อนหน้า var _node = _row.previoussibling; ในขณะที่ (_node && _node.nodeType! = 1) {_node = _node.previoussibling; } if (_node) {swapnode (_row, _node); }} ฟังก์ชั่น movingown (_a) {var _row = _a.parentNode.parentNode; // ถ้าไม่ใช่บรรทัดสุดท้ายให้สลับลำดับด้วยบรรทัดถัดไป var _node = _row.nextsibling; ในขณะที่ (_node && _node.nodeType! = 1) {_node = _node.nextsibling; } if (_node) {swapnode (_row, _node); }} ฟังก์ชั่น swapnode (node1, node2) {// รับโหนดพาเรนต์ var _parent = node1.parentNode; // รับตำแหน่งสัมพัทธ์ของสองโหนด var _t1 = node1.nextsibling; var _t2 = node2.nextsibling; // แทรก node2 ไปยังตำแหน่ง node1 ดั้งเดิมถ้า (_t1) _parent.insertbefore (node2, _t1); else _parent.appendchild (node2); // แทรก node1 ไปยังตำแหน่ง node2 ดั้งเดิมถ้า (_t2) _parent.insertbefore (node1, _t2); else _parent.appendchild (node1);} //-> </script> </body> </html>ภาพหน้าจอของเอฟเฟกต์การทำงานมีดังนี้:
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของเว็บไซต์นี้: "บทสรุปของทักษะอัลกอริทึมการค้นหา JavaScript", "บทสรุปของโครงสร้างข้อมูล JavaScript และทักษะอัลกอริทึม", "บทสรุปของอัลกอริธึมและเทคนิคการสรุปของ JavaScript" เอฟเฟกต์และเทคนิคการเคลื่อนไหวของ JavaScript "," สรุปข้อผิดพลาดของ JavaScript และเทคนิคการดีบัก "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน