<!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. http国际化模拟请求

    现在好多系统都有国际化的需求.不同国家的人读到不同的语言数据.那么怎么模拟请求的时候区分是哪个国家的语言信息,代码说明. HttpPost methed = new HttpPost("模拟 ...

  2. CS 231n----Assignment1 记录

    记录下在完成cs231n的Assignment1过程中的一些东西. 1. scores是一个N*C的array,N是训练样本个数,C是标签.y是(N,)的数组,取出每一个样本对应的score,可以用以 ...

  3. 阅读Python官方文档心得

    我会每天都阅读一些python的官方文档,并每天更新心得体会. -------------------------------------------------2016.12.08--------- ...

  4. 关于checkbox全选与反选的问题

    在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此 ...

  5. Protocol buffers 介绍

    Protocol buffers和mxl一样在序列化数据结构时很灵活.高效和智能,但是它的优势在于定义文件更小,读取速度更快,使用更加简单.目前protocol buffers支持C++.java和p ...

  6. Java并发编程：Callable、Future和FutureTask

    作者:海子 出处:http://www.cnblogs.com/dolphin0520/ 本博客中未标明转载的文章归作者海子和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置 ...

  7. jfinal相关

    1:jfinal工具类 1):密码加密工具 HashKit.md5(String password);2):数据缓存工具类 chacheKit3):获取项目路径工具类: PathKit 4):读取文件 ...

  8. JS 取得一个区间的随机整数

    function rnd(n, m){        var random = Math.floor(Math.random()*(m-n+1)+n);        return random;   ...

  9. caj转pdf

    1,准备工具 福昕阅读器 CAJViewer 2: CAJViewer打开caj文件,选项打印,选择福昕阅读器打印机,开始. 3:等待结束即可 提示:打印时间可能会稍长 请勿乱操作

  10. bootstrap 3 with IE8 compatibility

    12栅格布局在IE8下不起作用. 下载并引用html5shiv.js和respond.js 参考: 1.http://nextflow.in.th/en/keep-your-responsive-we ...