DHTML3(表格动态创建,删除行/列,表格行排序,行颜色交替高亮显示)

1.动态创建表格与删除指定行/列:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="CSS/Dtab.css" />
<script type="text/javascript">/*方法一:比较繁琐的方式通过document对象操作*/function createTab(){//创建节点var tableNode=document.createElement("Table");var tbodyNode=document.createElement("tbody");var trNode=document.createElement("tr");var tdNode=document.createElement("td");var textNode=document.createTextNode("单元格一");//指定节点之间关系
    tableNode.appendChild(tbodyNode);tbodyNode.appendChild(trNode);trNode.appendChild(tdNode);tdNode.appendChild(textNode);document.getElementsByTagName("div")[0].appendChild(tableNode);}/*方法二:利用table,tr对象中的方法*/function createTab2(){var tableNode=document.createElement("Table");var tableRow=document.getElementsByName("tableRow")[0].value;var tableColumn=document.getElementsByName("tableColumn")[0].value;var trNode,tdNode;for(var row=1;row<=tableRow;++row){trNode=tableNode.insertRow();//表格中插入一行,存放到table对象rows集合中for(var column=1;column<=tableColumn;++column){tdNode=trNode.insertCell();//行中插入一个单元格,//存放到tr对象cells(一行单元格集合)集合中     //table对象中的cells集合是表格中单元格集合
      tdNode.innerHTML="<font color='gray'>"+row+","+column+"</font>";//innerHtml属性可以让浏览器解析html         //标签,区分innerText(纯文本)
     }}event.srcElement.disabled=true;//按钮不可用,只允许创建一次
   document.getElementsByTagName("div")[0].appendChild(tableNode); tableNode.id="newTable";//以上执行成功为该表格指定一个id
  }/*删除指定行*/function deleteRow(){var tableNode=document.getElementById("newTable");//如果未创建tableNode的值为nullif(tableNode==null)alert("表格还未创建");else{var deleteRow=document.getElementsByName("deleteRow")[0].value;        if(deleteRow>0&&deleteRow<=tableNode.rows.length)tableNode.deleteRow(deleteRow-1);//如果不指定index,删除rows集合中最后一个elsealert("删除行行不存在");}}/*删除指定列*/function deleteColumn(){ var tableNode=document.getElementById("newTable");//如果未创建tableNode的值为nullif(tableNode==null)alert("表格还未创建");else{var deleteColumn=document.getElementsByName("deleteColumn")[0].value;if(deleteColumn>0&&deleteColumn<=tableNode.rows[0].cells.length)for(var line=0;line<tableNode.rows.length;++line)tableNode.rows(line).deleteCell(deleteColumn-1);elsealert("删除列不存在");}}
</script>
<title>动态创建表格</title>
</head><body>行:<input type="text" name="tableRow" /><br/>列:<input type="text" name="tableColumn" /><br/>删除指定行<input type="text" name="deleteRow" /><br/>删除指定列<input type="text" name="deleteColumn" /><br/><br/><br/><input type="button" value="创建表格" onclick="createTab2()"/><input type="button" value="删除行" onclick="deleteRow()"/><input type="button" value="删除列" onclick="deleteColumn()"/><br/><br/><div></div>
</body>
</html>

该例子的一些细节测试:

//tr,td索引测试: (在创建完表格,可以添加到上面JS中测试)
    trNode=tableNode.insertRow(2);//IE10:行列均从0开始指定的索引值为新插入行的索引:
                                   //例如:4行3列的表格
                                  //新插入的行的index=2,如果不指定默认-1,会向当前表格末尾一行插入
                                  //指定的索引<=指定行(例如:你不能指定1行,插入新行index=2)

    tdNode=trNode.insertCell();//不指定向当前单元格末尾插入和指定的-1效果相同
    tdNode.innerHTML="索引0";

    tdNode=trNode.insertCell(-1);
    tdNode.innerHTML="索引1";

    tdNode=trNode.insertCell(2);
    tdNode.innerHTML="索引2"; //最终结果该单元格的index为指定的index(2)

    alert(tableNode.rows(3).cells(3).innerHTML);//行与列的index从0开始,那么取到4行4列单元格内容

2.表格中的排序:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排序</title>
<link type="text/css" rel="stylesheet" href="CSS/TableSort.css" />
<script type="text/javascript">
/*方法一:行的单元格进行逐个交换*/function tabSort(){var tableNode=document.getElementById("tabID");var rowArr=tableNode.rows;bubbleSort(rowArr); }
var flag=true;//点击升序,再次点击降序/*对指定单元格进行冒泡排序,同时完成交换行*/
function bubbleSort(rowArr){if(flag){for(var i=1;i<rowArr.length-1;++i)for(var j=1;j<rowArr.length-i;++j)if(parseInt(rowArr[j].cells[1].innerText)>parseInt(rowArr[j+1].cells[1].innerText))//获取的为String需要转换为->int
       swapCells(rowArr,j,j+1);flag=false;}else{reverseOrder(rowArr);flag=true;}
}/*逆序*/function reverseOrder(rowArr){for(var start=1,end=rowArr.length-1;start<end;++start,--end)    swapCells(rowArr,start,end);}/*x,y两行的所有单元格交换数据*/function swapCells(rowArr,x,y){var temp;for(var i=0;i<rowArr[0].cells.length;++i){temp=rowArr[x].cells[i].innerText;rowArr[x].cells[i].innerText=rowArr[y].cells[i].innerText;rowArr[y].cells[i].innerText=temp;}}
</script>
</head><body><table id="tabID"><tr><th>姓名</th><th><a href="javascript:void(0)" onclick="tabSort2()">年龄</a></th><th>籍贯</th></tr><tr><td>张三</td><td>20</td><td>上海</td></tr><tr><td>李四</td><td>10</td><td>北京</td></tr><tr><td>马六</td><td>5</td><td>杭州</td></tr><tr><td>周七</td><td>30</td><td>福建</td></tr><tr><td>孙八</td><td>60</td><td>大连</td></tr><tr><td>徐风</td><td>40</td><td>北京</td></tr></table></body>
</html>
<script type="text/javascript">/*方法二:将行对象引用存储到临时容器(Array)中,对其排序,然后再通过tbody.appendChild方法对行对象的顺序进行调整*/var flag=true;function tabSort2(){var tableNode=document.getElementById("tabID");var tbodyNode=tableNode.getElementsByTagName("tbody")[0];var rowArr=new Array();for(var i=1;i<tableNode.rows.length;++i)rowArr[i-1]=tableNode.rows[i];selectSort(rowArr);if(flag){for(var i=0;i<rowArr.length;++i)tbodyNode.appendChild(rowArr[i]);flag=false;}else{for(var i=rowArr.length-1;i>=0;--i)tbodyNode.appendChild(rowArr[i]);flag=true;}}/*选择排序*/function selectSort(rowArr){for(var i=0;i<rowArr.length-1;++i)for(var j=i+1;j<rowArr.length;++j)if(parseInt(rowArr[i].cells[1].innerText)>parseInt(rowArr[j].cells[1].innerText))swapRow(rowArr,i,j);}/*行对象引用进行交换*/function swapRow(rowArr,x,y){var temp;temp=rowArr[x];rowArr[x]=rowArr[y];rowArr[y]=temp;}
</script>

该例子涉及到一些细节:

注意:
1.默认的tbody的位置
alert(tableNode.getElementsByTagName("tbody").length);//1
alert(tableNode.getElementsByTagName("tr")[2].parentNode.nodeName);//tbody
alert(tableNode.getElementsByTagName("tr")[3].parentNode.nodeName);//tbody
说明默认的1个tbody标签结构:
<tbody>
   <tr></tr>
   <tr></tr>
   ....
</tbody>
2.之所以用一个rowArr=new Array()来存放rows中引用来操作rowArr,而不直接
操作rows,因为如果tbodyNode.appendChild(rows[i])后,会改变rows集合的rows[i]
引用指向的对象.

3.表格的行颜色交替以及高亮显示某行:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="CSS/TableSort.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行颜色交替/动态注册事件</title>
<style type="text/css">.first{background-color:#993;}.second{background-color:#099;}.over{background-color:#FFF;}
</style>
<script type="text/javascript">var oldClassName;window.onload=function(){//页面加载完成后触发该事件var trNodes=document.getElementById("tabID").getElementsByTagName("tr");for(var i=1;i<trNodes.length;++i){if(i%2==0)//奇偶交替上色
           trNodes[i].className="first";elsetrNodes[i].className="second";trNodes[i].onmouseover=function(){//在tr对象上注册一个事件//事件属性指向一个匿名函数对象
            oldClassName=this.className//记录原有的样式this.className="over";//这里的this指向trNodes[i]
        }trNodes[i].onmouseout=function(){this.className=oldClassName;}}}
</script>
</head><body><table id="tabID"><tr><th>姓名</th><th>年龄</th><th>籍贯</th></tr><tr><td>张三</td><td>20</td><td>上海</td></tr><tr><td>李四</td><td>10</td><td>北京</td></tr><tr><td>马六</td><td>5</td><td>杭州</td></tr><tr><td>周七</td><td>30</td><td>福建</td></tr><tr><td>孙八</td><td>60</td><td>大连</td></tr><tr><td>徐风</td><td>40</td><td>北京</td></tr>
</table>
</body>
</html>

白色的一行为鼠标进入到改行的效果..比较难看- -!

转载于:https://www.cnblogs.com/yiqiu2324/p/3285922.html

DHTML3(表格动态创建,删除行/列,表格行排序,行颜色交替高亮显示)相关推荐

vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
vue自定义表格（每一列表格下面包含一个子表格）
vue自定义表格(每一列表格下面包含一个子表格) 实现效果图 template <div class="marsTable" ref="marsTable" ...
python表格处理实例_python列表格
三款新功能发布,助力阿里云表格存储再次升级阿里云表格存储于近期功能再升级,升级后的表格存储支持对DataHub采集的数据进行持久化存储,其Python SDK新增支持Python 3.x,以及最新发 ...
根据模板导出word，复合格式表格生成、可变列表格生成
系列文章目录第一章:springboot下生成复杂word文档方案在Word软件里面制作模板第三章:doc和docx插入多图第四章:web环境下word文档预览根据模板导出word,复合格式 ...
element 表格动态创建时表头错乱表格抖动
问题: 1.在el-table-column上使用v-show绑定是无效果 2.el-table-column几次切换显示/隐藏后,发现表格的排版完全乱了,或者值不能正常展示 3.表格头抖动原因: ...
html表格新插入一列,VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据来的 ...
动态创建模板列并绑定数据（GridView，Repeater，DataGrid）
要创建动态模板,请创建以后需要时可实例化的模板类. 创建模板类创建实现 System.Web.UI.ITemplate 接口的新类. 您也可以将值传递到类的构造函数,类可以使用该值来确定要创建的模板 ...
[原创]FineUI秘密花园（二十一） — 表格之动态创建列
有时我们需要根据数据来动态创建表格列,怎么来做到这一点呢?本章会详细讲解. 动态创建的列还是通过一个示例来看下如何在FineUI中动态创建表格列,示例的界面截图: 先来看下ASPX的标签定义: 1: ...
html 多行多列列表格,HTML跨多行跨多列表格.doc
HTML跨多行跨多列的表格上节所示的表格比较简单,如果我要插入一张图片,并且要占4个单元的空间,那怎么办?这就要用到跨多行跨多列的表格,本节就开始讲解如何实现把多个单元格合并成一个单元格.本节单词记忆 ...
excel表格行宽列高怎么设置_excel表格怎么设置行高列宽
excel表格怎么设置行高列宽你是怎么调整Excel表格的行高和列宽的? 如果还在用原始的手动调整方法,那你赶紧看看下面这几种解决方法,不仅效率高,而且调整的行高和列宽还很统一整齐哦,快和小编来学习 ...

DHTML3(表格动态创建,删除行/列,表格行排序,行颜色交替高亮显示)

DHTML3(表格动态创建,删除行/列,表格行排序,行颜色交替高亮显示)相关推荐

最新文章

热门文章