这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现点击上移下移 LI 行数据的方法, 涉及 javascript 针对 LI 列表动态排序的相关实现技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
本文实例讲述了 JS 实现点击上移下移 LI 行数据的方法。分享给大家供大家参考。具体如下:
这里演示 JavaScript 排序功能,点击按钮实现数据的上移和下称,一共有两组测试效果,上组采用箭头图标控制的方式,更美观,下组是直接使用文字,根据你的需要自行选择。myList 为 ul 的 id 值,m 为 0 显示文字,m 为 1 显示图片,mO、mT 为文字或图片内容。
演示效果如下图所示:
具体代码如下:
- <!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 content="text/html; charset=UTF-8" http-equiv="Content-Type">
- <title>
- JS移动li行数据,点击上移下移
- </title>
- <style type="text/CSS">
- * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon
- {width:500px;list-style:none;} #pCon li {height:20px;display:block;border-bottom:1px
- #ccc solid;} #pCon li a{margin-left:5px;text-decoration:none;} #pCon li
- a:hover{cursor:hand;} .context {float:left;display:inline;} .control {float:right;display:inline;}
- .control img {width:50px;height:12px;overflow:hidden;float:left;display:inline;}
- hr {margin:30px auto;} #pCon1 {width:500px;list-style:none;} #pCon1 li
- {height:20px;display:block;border-bottom:1px #ccc solid;} #pCon1 li a{margin-left:5px;text-decoration:none;}
- #pCon1 li a:hover{cursor:hand;}
- </style>
- </head>
- <body>
- <div class="content">
- <ul id="pCon">
- <li>
- <div class="context">
- 点击右侧箭头上移下移A
- </div>
- </li>
- <li>
- <div class="context">
- 点击右侧箭头上移下移B
- </div>
- </li>
- <li>
- <div class="context">
- 点击右侧箭头上移下移C
- </div>
- </li>
- </ul>
- <hr/>
- <ul id="pCon1">
- <li>
- <div class="context">
- 测试数据你相信么A
- </div>
- </li>
- <li>
- <div class="context">
- 测试数据你相信么B
- </div>
- </li>
- <li>
- <div class="context">
- 测试数据你相信么C
- </div>
- </li>
- </ul>
- </div>
- <script>
- function moveSonU(tag, pc) {
- var tagPre = get_previoussibling(tag);
- var t = document.getElementById(pc);
- if (tagPre != undefined) {
- t.insertBefore(tag, tagPre);
- }
- }
- function moveSonD(tag) {
- var tagNext = get_nextsibling(tag);
- if (tagNext != undefined) {
- insertAfter(tag, tagNext);
- }
- }
- function get_previoussibling(n) {
- if (n.previousSibling != null) {
- var x = n.previousSibling;
- while (x.nodeType != 1) {
- x = x.previousSibling;
- }
- return x;
- }
- }
- function get_nextsibling(n) {
- if (n.nextSibling != null) {
- var x = n.nextSibling;
- while (x.nodeType != 1) {
- x = x.nextSibling;
- }
- return x;
- }
- }
- function insertAfter(newElement, targetElement) {
- var parent = targetElement.parentNode;
- if (parent.lastChild == targetElement) {
- parent.appendChild(newElement);
- } else {
- parent.insertBefore(newElement, targetElement.nextSibling);
- }
- }
- function myOrder(myList, m, mO, mT) {
- //myList为ul的id值,m为0显示文字,m为1显示图片,mO、mT为文字或图片内容
- var pCon = document.getElementById(myList);
- var pSon = pCon.getElementsByTagName("li");
- for (i = 0; i < pSon.length; i++) {
- var conTemp = document.createElement("div");
- conTemp.setAttribute("class", "control");
- var clickUp = document.createElement("a");
- var clickDown = document.createElement("a");
- if (m == 0) {
- var upCon = document.createTextNode(mO);
- var downCon = document.createTextNode(mT);
- } else {
- var upCon = document.createElement("img");
- var downCon = document.createElement("img");
- upCon.setAttribute("src", mO);
- downCon.setAttribute("src", mT);
- }
- clickUp.appendChild(upCon);
- clickUp.setAttribute("href", "#");
- clickDown.appendChild(downCon);
- clickDown.setAttribute("href", "#");
- pSon[i].appendChild(conTemp);
- conTemp.appendChild(clickUp);
- conTemp.appendChild(clickDown);
- clickUp.onclick = function() {
- moveSonU(this.parentNode.parentNode, myList);
- }
- clickDown.onclick = function() {
- moveSonD(this.parentNode.parentNode);
- }
- }
- }
- myOrder("pCon", 1, "http://files.phperz.com/file_images/article/201508/201585153341254.png?201575153424", "http://files.phperz.com/file_images/article/201508/201585153353977.png?20157515349");
- myOrder("pCon1", 0, "上移", "下移");
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0712/270105.html