<!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. session management

    The session does not created until the HttpServletRequest.getSession() method is called.

  2. The PHP Package 之 monolog[转]

    Monolog 发送你的日志到文件.到sockets.到邮箱.到数据库或(和)者其他网路存储服务(云).Monolog可以做到同时保存到一个或多个存储介质(后面的栈冒泡处理). 安装   $ comp ...

  3. 扩展easyui.datagrid，添加数据loading遮罩效果代码 --来自网摘收集

    //jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...

  4. AX 插入一条记录提示表记录已经存在，但是该记录实际上是不存在的。

    做测试的时候遇到一个情况"AX 插入一条记录提示表记录已经存在,但是该记录实际上是不存在的." 检查到该表(TABLE_ABC)所有的key都是AllowDuplicate的, 继 ...

  5. Centos Cacti 0.8.8g

    一.Cacti简介1. cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据,当用户需要查看数据的时候用rrdtool生成图表呈现给用户.因 ...

  6. 关于conky

  7. nginx转发post消息成301了

    刚才开始是:第一次遇到这个问题是因为不支持sslv3 后来测试的时候,是因为没注意https的导致http 301跳转https post请求nginx转发成301了,到时post数据丢失

  8. AngularJS 2 VS Code Linter环境设置

    Angular Cli npm install -g angular-cli https://www.npmjs.com/package/angular-cli TSLinter 1.1 ext in ...

  9. SQL Server 临时表的删除

    --临时表与一般的表不同,它是保存到tempDb表中.临时表的表名与你所建的表名也不一样,因为他要为不同人的相同操作创建不同的临时表. --1.错误的删除操作: --错误的临时表删除操作,因为所在数据 ...

  10. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...