Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 783|回复: 0

javascript table 创建,多个table上下相互移动,table删除,table

[复制链接]

该用户从未签到

发表于 2011-10-13 17:20:27 | 显示全部楼层 |阅读模式
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type="text/javascript">
//var mytable1=null,mytable2=null;mytable3=null;mytable4=null;

for (i=1;i<=100;i++)
{
eval("var mytable"+i+"="+null);
}


var a=1;

window.onload=function(){
//mytable=new CTable("tb1",10);
newAdd();
var t=a-1;
mytable1=new CTable("tb1",2);
//mytable2=new CTable("tb2",6);
//newAdds();
// mytable2=new CTable("tb"+a,6);
}




function  aa(){
  
//alert(eval("mytable"+a));


newAdds();
eval("mytable"+a+"=new CTable('tb'+a,2)");
   a++;
}


function  newAdds(){
         var attrValueDiv = document.getElementById("attrValueDiv");
      var divNews=document.createElement("div");
        var divChilds = divNews.childNodes;   
        var tempHTML = '';   
        tempHtml += "<div style='margin:4px;padding-left:5px;'  id="+a
                        +" index="     
                        + divChilds.length   
                        + ">"   
                        + " <table width=100%>"   
                        + " <tr><td valign='top'>"   
                        + "<table width='100%' border>"  
                        + "<tr><td  style='background-color: #ffffff' colspan='2'>问题单元1</td></tr>"
                        + "<tr><td  style='background-color: #ffffff' colspan='2'>单元标题<input type='text' name='sex' value=''></td></tr>"  
                        + "<tr><td  style='background-color: #ffffff' colspan='2'>选择移动: "
                        + "<a  onClick='javascript:mytable"+a+".add()'> 添加 </a>"
                     
                        + "<a  onClick='javascript:mytable"+a+".up()'> 上移 </a>"
                         + "<a   onClick='javascript:mytable"+a+".down()'> 下移 </a>"
                         + "<a   onClick='javascript:mytable"+a+".del()'> 删除 </a>"
                         + "</td></tr>"
                          + "<tr><td valign='top' colspan='2'><table  id=tb"
                          +a
                          +" width='80%'></table>"
                          +"</td></tr>"
                          
                          + "<tr><td colspan='2'>选择类型<input type='radio' name='sex' value=''>单选<input type='radio' name='sex' value=''>多选</td></tr>"
                         + "</table></td></tr>"
            
                         + "</table>"
                       + " <a  onClick='javascript:aa();'>添加新单元</a>  &nbsp"
                         + " <a  onClick='javascript:delMove("+a+");'>删除此单元</a>  &nbsp"
                         +"<a onclick='upMove(this);'    title='上移'>上移单元</a>  &nbsp"
                         +"<a onclick='downMove(this);'   title='下移'>下移单元</a>"
                        + "</div>";   
        divNews.innerHTML += tempHtml;
        attrValueDiv.appendChild(divNews);
      
        
}
function newAdd(){
   var attrValueDiv = document.getElementById("attrValueDiv");   
        var divChilds = attrValueDiv.childNodes;   
        var tempHtml = '';   
var attrValueDiv = document.getElementById("attrValueDiv");   

         var divNews=document.createElement("div");  
        var divChilds = divNews.childNodes;
        var b=a+1;   
        var tempHtml = '';   
        tempHtml += "<div style='margin:4px;padding-left:5px;' id="+a
                        +" index="   
                        + divChilds.length   
                        + ">"   
                        + " <table width=100%>"   
                        + " <tr><td valign='top'>"   
                        + "<table width='100%' border>"  
                        + "<tr><td  style='background-color: #ffffff' colspan='2'>问题单元1</td></tr>"
                        + "<tr><td  style='background-color: #ffffff' colspan='2'>单元标题<input type='text' name='sex' value=''></td></tr>"  
                        + "<tr><td  style='background-color: #ffffff' colspan='2'>选择移动: "
                        + "<a  onClick='javascript:mytable1.add()'> 添加 </a>"  
                        + "<a   onClick='javascript:mytable1.up()'> 上移 </a>"
                         + "<a   onClick='javascript:mytable1.down()'> 下移 </a>"
                         + "<a   onClick='javascript:mytable1.del()'> 删除 </a>"
                         + "</td></tr>"
                          + "<tr><td valign='top' colspan='2'><table  id=tb"
                          +a
                          +" width='80%'></table>"
                          +"</td></tr>"
                          
                          + "<tr><td colspan='2'>选择类型<input type='radio' name='sex' value=''>单选<input type='radio' name='sex' value=''>多选</td></tr>"
                         + "</table></td></tr>"
                     
                         + "</table>"
                          + " <a  onClick='javascript:aa();'>添加新单元</a>  &nbsp"
                         + " <a  onClick='javascript:delMove("+a+");'>删除此单元</a>  &nbsp"
                         +"<a onclick='upMove(this);'    title='上移'>上移单元</a>  &nbsp"
                         +"<a onclick='downMove(this);'   title='下移'>下移单元</a>"
                        + "</div>";
        divNews.innerHTML += tempHtml;
        attrValueDiv.appendChild(divNews);
         a++;
    }
Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this,i,this)}

function $A(arrayLike){
for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike);
return ret
}

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}


function CTable(id,rows){
this.tbl=typeof(id)=="string"?document.getElementById(id):id;
if (rows && /^\d+$/.test(rows)) this.addrows(rows)
}

CTable.prototype={
addrows:function(n){          //随机添加n个tr
new Array(n).each(this.add.bind(this))
},
add:function(){           //添加1个tr
var self=this;      //添加1个tr
var tr =self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1),td4= tr.insertCell(-1);
var i=tr.rowIndex;

var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute("width","35")

td2.innerHTML="<lable>选择</lable>";
td2.setAttribute("width","35")

var text=document.createElement("INPUT")
text.type="text"
text.onclick=self.highlight.bind(self)
td3.appendChild(text)
td3.setAttribute("width","20")

td4.innerHTML="<a>      </a>";
},
del:function(){           //删除所选tr
var self=this
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
},
up:function(){              //上移所选tr
var self=this
var upOne=function(tr){          //上移1个tr
if (tr.rowIndex>0){
self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])
self.getChkBox(tr).checked=true
}
}
var arr=$A(self.tbl.rows).reverse()
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr).checked){
arr.pop()           
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});
},
down:function(){
var self=this
var downOne=function(tr){      
if (tr.rowIndex<self.tbl.rows.length-1)  {
self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);
self.getChkBox(tr).checked=true;
}
}
var arr=$A(self.tbl.rows)

if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});
},
sort:function(){           //排序  
var self=this,order=arguments[0];
var sortBy=function(a,b){
if (typeof(order)=="number"){  //数字,则按数字指示的列排序
return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1;   //转化为数字类型比较大小
}else if (typeof(order)=="function"){     //为程序,按 程序的返回结果排序
return order(a,b);
}else{
return 1;
}
}
$A(self.tbl.rows).sort(sortBy).each(function(x){
var checkStatus=self.getChkBox(x).checked;
self.tbl.firstChild.appendChild(x);
if (checkStatus) self.getChkBox(x).checked=checkStatus;
});
},
rnd:function(){           //随即选择几行tr
var self=this,selmax=0,tbl=self.tbl;
if (tbl.rows.length){
selmax=Math.max(Math.ceil(tbl.rows.length/4),1);  //选择的行数不超过tr数的1/4
$A(tbl.rows).each(function(x){
self.getChkBox(x).checked=false;
self.restoreBgColor(x)
})
}else{
return alert("无数据可以选")
}
new Array(selmax).each(function(){
var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]
self.getChkBox(tr).checked=true;
self.highlight({target:self.getChkBox(tr)})
})
},
highlight:function(){               //设置tr的背景色
var self=this;
var evt=arguments[0] || window.event
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)
},
swapTr:function(tr1,tr2){             //交换tr1和tr2的位置
var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;
var tBody=tr1.parentNode
tBody.replaceChild(tr2,tr1);
    tBody.insertBefore(tr1,target);
},
getChkBox:function(tr){           //从tr得到 checkbox对象
return tr.cells[0].firstChild
},
restoreBgColor:function(tr){         
tr.style.backgroundColor="#ffffff"
},
setBgColor:function(tr){
tr.style.backgroundColor="#c0c0c0"
}
}

function f(a,b){
var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};
return sumRow(a)>sumRow(b)?1:-1;
}








//table  上下移动,删除

function delMove(a) {  
         var ob = document.getElementById(a);   
         ob.parentNode.removeChild(ob);  
     }
function upMove(upA) {
        // 通过链接对象获取表格行的引用   
        var attrValueDiv = document.getElementById("attrValueDiv");   
        var row = upA.parentNode;   
        var divChilds = attrValueDiv.childNodes;   
        var index = parseInt(row.getAttribute('index'));   
        // 如果不是第一行,则与上一行交换顺序   
        if (divChilds[index - 1] && index != 0) {   
            swapNode(divChilds[index], divChilds[index - 1]);   
        }   
    }   
  
    function downMove(downA) {   
   
        // 通过链接对象获取表格行的引用   
        var attrValueDiv = document.getElementById("attrValueDiv");   
        var row = downA.parentNode;   
        var divChilds = attrValueDiv.childNodes;   
        var index = parseInt(row.getAttribute('index'));   
        // 如果不是最后一行,则与下一行交换顺序   
        if (divChilds[index + 1]) {   
            swapNode(divChilds[index], divChilds[index + 1]);   
        }   
    }   
  
    function swapNode(node1, node2) {   
        var parent = document.getElementById("attrValueDiv");// 父节点   
        var t1 = node1.nextSibling;// 两节点的相对位置   
        var t2 = node2.nextSibling;   
        // 如果是插入到最后就用appendChild   
        if (t1)   
            parent.insertBefore(node2, t1);   
        else   
            parent.appendChild(node2);   
        if (t2)   
            parent.insertBefore(node1, t2);   
        else   
            parent.appendChild(node1);   
        var index1 = node1.getAttribute('index');   
        var index2 = node2.getAttribute('index');   
        node1.setAttribute('index', index2)   
        node2.setAttribute('index', index1)   
    }   
</script>
<div id="attrValueDiv"></div>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

GMT+8, 2024-5-18 21:01 , Processed in 0.395703 second(s), 48 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表