<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="move2.js"></script>
</head>
<body>
<div style="width: 500px; margin:20px auto;">
<input type="text" id="tex">
<input type="button" id="btn" value="添加"></div>
<table id="tab" border="1" width="500px" style="margin:0 auto;">
<thead>
<tr>
<td>姓名</td>
<td>学号</td>
<td>时间</td>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>aa</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>bb</td>
<td></td>
</tr>
<tr>
<td>33</td>
<td>cc</td>
<td></td>
</tr>
<tr>
<td>44</td>
<td>dd</td>
<td></td>
</tr>
<tr>
<td>55</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>66</td>
<td>3</td>
<td></td>
</tr>

</tbody>
</table>

<!-- <script>
悬停变色
window.onload=function(){
var oTab=document.getElementById('tab');
var oTr=oTab.tBodies[0].rows;
var i=0;
var oColor="";
for(i=0;i<oTr.length;i++){
if (i%2) {
oTr[i].style.background='#eee';
}

}
for(i=0;i<oTr.length;i++){

oTr[i].onmouseover=function(){
oColor=this.style.background;
this.style.background='green';
}
oTr[i].onmouseout=function(){
this.style.background=oColor;
}
}
}
</script> -->

<!-- <script>
动态添加
window.onload=function(){
var oTab=document.getElementById('tab');
var oText=document.getElementById('tex');
var oBtn=document.getElementById('btn');
var i=0;
oBtn.onclick=function(){
oTr=document.createElement('tr');
oTd="";
oTd=document.createElement('td');
oTd.innerHTML=oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);
oTd=document.createElement('td');
oTd.innerHTML=oText.value;
oTr.appendChild(oTd);
oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>'
var aA=oTd.getElementsByTagName('a')[0];
aA.onclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
}

}
</script> -->
<script>
window.onload=function(){
var oTab=document.getElementById('tab');
var oText=document.getElementById('tex');
var oBtn=document.getElementById('btn');
var i=0;
var arr=[];
oBtn.onclick=function(){
/* 首先创建数组 因为sort是数组的方法 */
for(i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i];
};
/*数组排序*/
arr.sort(function(tr1,tr2){
return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
});
/*重新添加*/
for(i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i]);
}

}
}
</script>
</body>
</html>

table 排序 添加 删除 等操作的更多相关文章

  1. WebLogic Server添加删除补丁操作【转】【补】

    WebLogic Server添加删除补丁操作 0 查看当前weblogic版本 [weblogic@localhost bin]$ cd /data/bea/weblogic11/wlserver_ ...

  2. redis cluster 添加/删除节点操作

    RedisCluster 添加/删除节点 添加节点新配置两个测试节点8008和9009 [root@--- ~]# /usr/local/redis-/bin/redis-server /u02/re ...

  3. table动态添加删除一行和改变标题

    <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...

  4. centos8平台redis cluster集群添加/删除node节点(redis5.0.7)

    一,当前redis cluster的node情况: 我们的添加删除等操作都是以这个cluster作为demo cluster采用六台redis,3主3从 redis1 : ip: 172.17.0.2 ...

  5. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  6. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  7. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  8. C#通过Ado.net对连接数据库并进行添加删除等常规操作的代码

    如下资料是关于C#通过Ado.net对连接数据库并进行添加删除等常规操作的内容. static string sqlcon = "server=.;database=;Integrated ...

  9. centos的用户、组权限、添加删除用户等操作的详细操作命令

    1.Linux操作系统是多用户多任务操作系统,包括用户账户和组账户两种 细分用户账户(普通用户账户,超级用户账户)除了用户账户以为还 有组账户所谓组账户就是用户账户的集合,centos组中有两种类型, ...

随机推荐

  1. 对restful的理解

    最近在学习web api,从而涉及到了restful风格,我的理解是restful风格,每个链接都会对资源进行相应的操作(CRUD),如果一个链接不包含资源,则可能不符合restful风格,借此想请教 ...

  2. setTimeout传递参数

    window.SetTimeout = function (callback, millisec, param) { var args = Array.prototype.slice.call(arg ...

  3. md5算法

    md5算法 不可逆的:原文-->密文.用系统的API可以实现: 123456 ---密文 1987 ----密文: 算法步骤: 1.用每个byte去和11111111做与运算并且得到的是int类 ...

  4. shell 判断文件是否存在

    举例 #!/bin/sh myFile="/var /log/httpd/access.log" if [ ! -e "$myFile" ]; then tou ...

  5. 如何判断js中的数据类型

    如何判断js中的数据类型:typeof.instanceof. constructor. prototype方法比较 如何判断js中的类型呢,先举几个例子: var a = "iamstri ...

  6. NK3C框架(MyBatis、Durid)连接SQL Server

    NK3C框架连接SQL Server修改配置如下: 1.添加POM引用 <sqlserver.driver.version>4.0</sqlserver.driver.version ...

  7. C++读入XML文件

    最近要做一个VRP的算法,测试集都是放在Xml文件中,而我的算法使用C++来写,所以需要用C++来读取Xml文件. 在百度上搜"C++读取Xml文件",可以出来很多博客,大多数是关 ...

  8. Python-any函数和all函数

    any函数: any(x),只要x中有一个不为空,0,false就返回True,否则返回False all(x)函数 必须x中的所有元素均不为空,0,false才会返回True,否则返回False & ...

  9. PHP简单利用token防止表单重复提交

    <?php /* * PHP简单利用token防止表单重复提交 * 此处理方法纯粹是为了给初学者参考 */ session_start(); function set_token() { $_S ...

  10. 升级SSH

    本例使用CentOS6.6 原SSH版本为5.3P1 一.准备好需要升级到的新版本的软件包 openssh下载地址:http://www.openssh.com/portable.html#http ...