JavaScript 实现页面元素(ul-li)的简单排序

JavaScript 实现页面元素(ul-li)的简单排序

html页面:

<input type="button" value="show" onclick="show()" />
    <ul id="ul1">
      <li>4</li>
      <li>3</li>
      <li>2</li>
      <li>1</li>
    </ul>

JavaScript代码

function show(){
      var ul1=document.getElementById("ul1");
      //找出我们所有的li滴呀
      var lis=ul1.getElementsByTagName("li");
      //建立以新的数组滴呀
      var list=[];
      var liLen=lis.length;
      for(var i=0;i<liLen;i++){
         //这个就是我们添加的东西滴一
          list[i]=lis[i];
      }
      //对数组进行排序滴呀
      list.sort(function (li1,li2){
          var n1=parseInt(li1.innerHTML);
          var n2=parseInt(li2.innerHTML);
          return n1-n2; //这样来进行我们简单的比较滴呀
      })

      //然后我们再appendChild 就可以实现我们基本的操作滴啊
      for(var j=0;j<liLen;j++){
         ul1.appendChild(list[j]); //数组是已经排好序滴啦;
         //一些都是很简单的方法滴呀;
         //我要如何去做滴呀
      }
  }

同样的代码,我们可以应用带在我们的table表格排序中滴呀

时间: 2025-01-22 15:40:31

JavaScript 实现页面元素(ul-li)的简单排序的相关文章

[转载]用Javascript获取页面元素的位置

原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那

jsp页面使用javascript添加页面元素示例代码

<body>    <input type="button" value="test" onclick="javascript:a();">    <table id="tab">      <tr>       <td>1</td>       <td><input name="11" type="text

用javaScript获取页面元素值

用JavaScript获取页面元素常见的三种方法:                                                           getElementById()                                                           getElementsByName()                                                           getElementsBy

使用JavaScript操作页面元素

在webdriver脚本代码中执行JavaScript代码,来实现对页面元素的操作.此种方式主要用于解决在某些情况下,页面元素的.click()方法无法生效等问题. #!usr/bin/env python #-*- coding:utf-8 -*- """ @author: sleeping_cat @Contact : [email protected] """ #使用JavaScript操作页面元素 from selenium import

webdriver高级应用-使用JavaScript操作页面元素

Webdriver搞不定的,需要用js,无需引入有关js的包就可用 在WebDriver脚本代码中执行JavaScript代码,来实现对页面元素的操作.此方法主要用于解决在某些情况下,页面元素的.click()方法无法生效等问题. #encoding=utf-8 from selenium import webdriver from selenium.common.exceptions import WebDriverException import unittest import traceb

JavaScript获取页面元素

onload = function () { alert(document.getElementById('Button0').value); var buttonArr = document.getElementsByName('n1'); for (var i = 0; i < buttonArr.length; i++) { alert(buttonArr[i].value); } var button = document.getElementsByTagName("input&q

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

使用JavaScript改变页面元素的属性

在使用HTML制作web页面的过程中,很多时候需要动态的去改变控件的属性,这就需要通过调用JavaScript脚本来实现.下面介绍了本人使用过的一些示例代码. JavaScript脚本改变页面控件的HTML属性. 1.语法: document.getElementById(id).attribute=new value 2.说明: id 控件的ID attribute 控件的HTML属性 new value 新的属性值 3.示例代码: <!DOCTYPE html PUBLIC "-//W

常用JavaScript操作页面元素的方法

1.取得dropdownlist的选中值 var ddl =document.getElementById('<%=ddlusers.ClientID%>'); var index = ddl.selectedIndex; var Value = ddl.options[index].value; var Text = ddl.options[index].text; 2.给textbox文本框赋值 document.getElementById('<%=txtzfry.ClientID