<!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. AX7: CREATE AN AUTOMATED TEST PACKAGE\MODEL

    AX7: CREATE AN AUTOMATED TEST PACKAGE\MODEL It’s really important for a stable solution the use of a ...

  2. [转]：C#的ToString如何格式化字符串

    C 货币 2.5.ToString("C") ￥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToString ...

  3. linux pam 控制模式

    工作类别(type).流程栈(stack)和控制模式(control) Linux-PAM 工作的"类别"(type) PAM 的具体工作主要有以下四种类别(type):accou ...

  4. 细说 webpack 之流程篇

    摘自: http://taobaofed.org/blog/2016/09/09/webpack-flow/ 引言 目前,几乎所有业务的开发构建都会用到 webpack .的确,作为模块加载和打包神器 ...

  5. C语言指针变量作为函数参数

    0x01 指针变量作为函数参数的作用是:将一个变量的地址传送到另一个函数中. 0x02 简单的例子:虽然都能实现功能,但意义不同. 正确的写法: #include <stdio.h> vo ...

  6. hibernate的环境配置

    1,首先把跟Hibernate相关的jar包导入到lib目录下: 2,写Javabean类 package chen.can.Dao; public class TRegister implement ...

  7. Eclipses使用小技巧

    1.新导入Eclipse的项目,显示很多错误,一般是因为没有加上对应的Lib,添加后错误消失. 2.如果还有错误,而且是与JavaEE相关的,比如说HttpServlet类找不到,更新一下tomcat ...

  8. Sql With as 用法

    with district as (     select  * from Area where AbbrTW= N'中國'     union all     select  a.* from Ar ...

  9. git乱码问题解决

    etc\gitconfig文件中增加以下内容: [gui]     encoding = utf-8 [i18n]     commitencoding = gbk [svn]     pathnam ...

  10. spring quartz 定时器时间格式设置

    "0/10 * * * * ?" 10秒执行一次 "0 0 12 * * ?"每天中午十二点触发"0 15 10 ? * *"每天早上10: ...