DHTML-----表格的创建和样式
2016-06-17 12:06
519 查看
一、表格的创建、删除
给定表格的行列，实现创建，修改和，删除功能
二、表格的DIV样式（间隔显示，高亮、排序）
给定表格的行列，实现创建，修改和，删除功能
<!DOCTYPE html>
<html>
<head>
<title>DHTML技术演示</title>
<style type="text/css">
table{
border-collapse:collapse;
color#ff0080;
width:800px;
}
table td{
border:#0000ff 1px solid;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--添加-->
<input type="button" value="创建一行" onclick="creatTable()">
<input type="button" value="创建多行表格" onclick="creatTable2()">
<hr/>
行数<input type="text" name="rowNum" >
列数<input type="text" name="colNum" >
<input type="button" value="创建" onclick="creatTable3()">
<h3>删除前面由用户指定行列号方式创建的表格</h3> <br/>
行号<input type="text" name="delRowNum" >
<input type="button" value="删除行" onclick="delRow()">
列号<input type="text" name="delColNum" >
<input type="button" value="删除行" onclick="delCol()">
<div>
</div>
</body>
<script type="text/javascript">
function creatTable(){
var oTableNode=document.createElement("table");//创建表格对象
var oTrNode=oTableNode.insertRow();//创建行对象
var oTdNode=oTrNode.insertCell();//创建单元格
oTdNode.innerHTML="内容";
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
function creatTable2(){
var oTableNode=document.createElement("table");//创建表格对象
for(var i=0;i<8;i++){
var oTrNode=oTableNode.insertRow();//创建行对象
for(var j=0;j<5;j++){
var oTdNode=oTrNode.insertCell();//创建单元格
oTdNode.innerHTML=(i+1)+"行"+(j+1)+"列";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
//用户自定义行号与列号的方式创建表格
function creatTable3(){
var oTableNode=document.createElement("table");//创建表格对象
//添加属性
oTableNode.setAttribute("id","tableId");//这种利用方法更好
//由用户指定行数与列数的表格
//获取用户输入的行数与列数
var rowNum=parseInt(document.getElementsByName("rowNum")[0].value);
var colNum=parseInt(document.getElementsByName("colNum")[0].value);
//防护
if(isNaN(rowNum)||rowNum<=0||isNaN(colNum)||colNum<=0){
alert("请输入大于0的整数");
return;
}
for(var i=0;i<rowNum;i++){
var oTrNode=oTableNode.insertRow();//创建行对象
for(var j=0;j<colNum;j++){
var oTdNode=oTrNode.insertCell();//创建单元格
oTdNode.innerHTML="第"+(i+1)+"行"+"第"+(j+1)+"列";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
document.getElementsByTagName("div")[0].innerHTML+="<hr/>";
}
//删除指定的行,列
function delRow(){
var oTableNode=document.getElementById("tableId");
//防护
if(oTableNode==null){
alert("表格不存在");
return;
}
//删除行的处理代码
//获取用户输入的行号
var delRowNum=parseInt(document.getElementsByName("delRowNum")[0].value);
//行防护
if(isNaN(delRowNum)){
alert("行号必须是数字");
return;
}
if(!(delRowNum>0&&delRowNum<=oTableNode.getElementsByTagName("tbody")[0].getElementsByTagName("tr").length)){
alert("改行不存在");
return;
}
//删除行
oTableNode.deleteRow(delRowNum-1);
}
//删除指定的列
function delCol(){
var oTableNode=document.getElementById("tableId");
//防护
if(oTableNode==null){
alert("表格不存在");
return;
}
//删除列的处理代码
//获取用户输入的列号
var delColNum=parseInt(document.getElementsByName("delColNum")[0].value);
//列防护
if(isNaN(delColNum)){
alert("列号必须是数字");
return;
}
if(!(delColNum>0&&delColNum<=oTableNode.rows[0].cells.length)){
alert("改列不存在");
return;
}
//删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现
for(var x=0;x<oTableNode.rows.length;x++){
oTableNode.rows[x].deleteCell(delColNum-1);
}
}
</script>
</html>二、表格的DIV样式（间隔显示，高亮、排序）
<!DOCTYPE html>
<html>
<head>
<title>tableSytle.html</title>
<style type="text/css">
@import url(1.css);
.one{
background-color:#ff8040;
}
.two{
color:#8000ff;
}
.over{
background-color:#ffff00;
}
</style>
</head>
<body>
<table id="table">
<caption>湖南城市学院</caption>
<tr><th> 姓名</th> <th> <a href="javascript:void(0);" onclick="sortMethod(this);">年龄</a></th> <th> 地址</th> </tr>
<tr><td> 张三</td> <td> 30</td> <td> 湖南长沙</td> </tr>
<tr><td> Tom</td> <td> 10</td> <td> 湖南长沙</td> </tr>
<tr><td> 李四</td> <td> 2</td> <td> 湖南长沙</td> </tr>
<tr><td> 杰克</td> <td> 23</td> <td> 湖南长沙</td> </tr>
<tr><td> Jack</td> <td> 26</td> <td> 湖南长沙</td> </tr>
<tr><td> wang</td> <td> 21</td> <td> 湖南长沙</td> </tr>
<tr><td> 王建安</td> <td> 26</td> <td> 湖南长沙</td> </tr>
</table>
</body>
<script type="text/javascript">
var i;
function trColor(){
var oTableNode=document.getElementById("table");
var cells=parseInt(oTableNode.rows[0].cells.length)*parseInt(oTableNode.rows.length);
var count=0;
while(count<cells){
for(i=0;i<oTableNode.rows.length;i++){
for(var j=0;j<oTableNode.rows[0].cells.length;j++){
if(((count++)%4)==0){
oTableNode.rows[i].cells[j].style.fontSize="23px";
}else{
oTableNode.rows[i].cells[j].style.fontStyle="italic";
}
}
}
}
for(i=0;i<oTableNode.rows.length;i++){
if((i&1)==0){//相同为1不同为0
oTableNode.rows[i].className="one";
}else{
oTableNode.rows[i].className="two";
}
var oldClassName;
oTableNode.rows[i].onmouseover=function(){
oldClassName=this.className;
//oTableNode.rows[i].className="over";
//alert( i+" "+oTableNode.rows[i-1].className);//i=oTableNode.rows.length进不去
this.className="over";
}
oTableNode.rows[i].onmouseout=function(){
this.className= oldClassName;
}
}
}
//onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
onload = function(){
trColor();
//还可以在这里写其它代码，甚至调用其它函数
};//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行，而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
var flag=true;
function sortMethod(aNode){
// alert(this);//windows
var oTableNode=document.getElementById("table");
var oTrNodes=[];
for(var i=1;i<oTableNode.rows.length;i++){
oTrNodes[i-1]=oTableNode.rows[i];
}
mySortMinTOMax(oTrNodes);
if(flag){
for(var x=0;x<oTrNodes.length;x++){
oTrNodes[x].parentNode.appendChild(oTrNodes[x]);
}
aNode.innerText="年龄↑";
}else{
for(var x=oTrNodes.length-1;x>=0;x--){
oTrNodes[x].parentNode.appendChild(oTrNodes[x]);
}
aNode.innerText="年龄↓";
}
flag=!flag;
//下面这张可以，但不简便
/*if((oTableNode.rows[0].cells[1].innerText=="年龄")||(oTableNode.rows[0].cells[1].innerText=="年龄↓")){
mySortMinTOMax(oTrNodes);
oTableNode.rows[0].cells[1].innerHTML="<td><a href='javascript:void(0);' onclick='sortMethod();'>年龄↑</a></td>";
}else{
mySortMaxTOMin(oTrNodes);
oTableNode.rows[0].cells[1].innerHTML ="<td><a href='javascript:void(0);' onclick='sortMethod();'>年龄↓</a></td>";
}
for(var i=0;i<oTrNodes.length;i++){
oTrNodes[i].parentNode.appendChild(oTrNodes[i]);//覆盖方法
}*/
trColor();
}
function mySortMinTOMax(arr){
for(var x=0;x<arr.length-1;x++){
for(var y=x+1;y<arr.length;y++){
if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
function mySortMaxTOMin(arr){
for(var x=0;x<arr.length-1;x++){
for(var y=x+1;y<arr.length;y++){
if(parseInt(arr[x].cells[1].innerText) < parseInt(arr[y].cells[1].innerText)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3-ghostButton
- css绘制六边形
- 浅谈CSS在前端优化中一些值得注意的关键点
- 自制WheelView沉浸式菜单及Dialog样式Activity 推荐
- 上传按钮样式优化 <input type="file" />
- 模态视图那些事（二）之 弹出视图样式
- Html+CSS绘制三角形图标
- 用CSS隐藏页面元素的5种方法
- html+css——<q>标签
- css——浏览器前缀
- CSS中padding和margin的区别
- [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
- DIV+CSS布局
- z-index不起作用
- （10）用css建立表单
- css揭秘之按钮的实现技巧
- 网页样式混乱
- css揭秘之linear-gradient
- CSS3的笔记总结
- html——样式、链接和表格