js操作table(创建并设置样式)与图片控制

一、操作table

Html代码

1. .TableLine{   
2.     border-collapse:collapse;   
3.     border:1px solid #9BC2E0;   
4. }   
5. .TableLine td{   
6.     border:1px solid #9BC2E0;   
7. }   
8. tr.over td {   
9.     background:#bcd4ec; /*这个将是鼠标所在高亮行的背景色*/   
10. }   
11. /********长文本，不换行*************/   
12. .longTxt{   
13.     overflow:hidden;   
14.     text-overflow:ellipsis;   
15.     -o-text-overflow:ellipsis;   
16.     white-space:nowrap;   
17.     text-align:left;   
18.     padding-left: 2px;   
19. }  

.TableLine{
	border-collapse:collapse;
	border:1px solid #9BC2E0;
}
.TableLine td{
	border:1px solid #9BC2E0;
}
tr.over td {
	background:#bcd4ec; /*这个将是鼠标所在高亮行的背景色*/
}
/********长文本，不换行*************/
.longTxt{
	overflow:hidden;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	white-space:nowrap;
	text-align:left;
	padding-left: 2px;
}

 

Js代码

1. /**  
2.  * 创建表格  
3.  * id  为表格id  
4.  * arr 为表格表头  
5.  */  
6. function createTable(id,arr){   
7.     var table = document.createElement('table');   
8.     table.setAttribute("id",id);   
9.     table.setAttribute("className","TableLine");//设定样式   
10.     table.setAttribute("width",'98%');   
11.     table.setAttribute("cellpadding",'3');   
12.     table.setAttribute("cellspacing",'0');   
13.   
14.     var row = table.insertRow();   
15.     row.style.setAttribute("backgroundColor","#e0e0e0");   
16.        
17.     for (var i = 0; i < arr.length; i++) {   
18.          var col = row.insertCell();   
19.          if(i==0){   
20.             col.setAttribute("width",'3%');   
21.          }   
22.          col.setAttribute("className","border:1px solid #9BC2E0;");   
23.          col.setAttribute("align","center");   
24.          col.style.fontSize="13px";   
25.          col.style.fontWeight="Bold";;   
26.          //var style  = document.createAttribute("styles");   
27.          //style.nodeValue = "font-size:large";   
28.          //col.setAttributeNode(style);   
29.          col.innerHTML = arr[i];   
30.     }   
31.     //alert(table.outerHTML);   
32.     return table;   
33. }  

/**
 * 创建表格
 * id  为表格id
 * arr 为表格表头
 */
function createTable(id,arr){
	var table = document.createElement('table');
	table.setAttribute("id",id);
	table.setAttribute("className","TableLine");//设定样式
	table.setAttribute("width",'98%');
	table.setAttribute("cellpadding",'3');
	table.setAttribute("cellspacing",'0');

	var row = table.insertRow();
	row.style.setAttribute("backgroundColor","#e0e0e0");
	
	for (var i = 0; i < arr.length; i++) {
         var col = row.insertCell();
         if(i==0){
         	col.setAttribute("width",'3%');
         }
		 col.setAttribute("className","border:1px solid #9BC2E0;");
		 col.setAttribute("align","center");
		 col.style.fontSize="13px";
		 col.style.fontWeight="Bold";;
         //var style  = document.createAttribute("styles");
         //style.nodeValue = "font-size:large";
         //col.setAttributeNode(style);
         col.innerHTML = arr[i];
    }
    //alert(table.outerHTML);
    return table;
}

Js代码

1. /**  
2.  * 向表格插入一行  
3.  */  
4. function addRow(table,id,arr){   
5.   var row = table.insertRow();   
6.   row.setAttribute("id",id);   
7.   row.onclick=function (){};   
8.   for(var i=0;i<arr.length;i++){   
9.     var col = row.insertCell();   
10.     col.innerHTML = arr[i];   
11.         //col.innerText = arr[i];   
12.     col.setAttribute("title",arr[i]);   
13.   }   
14. }  

/**
 * 向表格插入一行
 */
function addRow(table,id,arr){
  var row =	table.insertRow();
  row.setAttribute("id",id);
  row.onclick=function (){};
  for(var i=0;i<arr.length;i++){
	var col = row.insertCell();
	col.innerHTML = arr[i];
        //col.innerText = arr[i];
	col.setAttribute("title",arr[i]);
  }
}

复选(以name)分组的全选与取消全选

Js代码

1. function checkAll(name) {        
2.   var el = document.getElementsByTagName('input');        
3.   var len = el.length;     for(var i=0; i<len; i++) {            
4.    if((el[i].type=="checkbox") && (el[i].name==name)) {                
5.         el[i].checked = true;            
6.    }        
7.   }    
8. }    
9.         
10. function clearAll(name) {        
11.   var el = document.getElementsByTagName('input');        
12.   var len = el.length;        
13.   for(var i=0; i<len; i++) {            
14.    if((el[i].type=="checkbox") && (el[i].name==name)) {                
15.         el[i].checked = false;            
16.    }        
17.   }    
18. }  

function checkAll(name) {     
  var el = document.getElementsByTagName('input');     
  var len = el.length;     for(var i=0; i<len; i++) {         
   if((el[i].type=="checkbox") && (el[i].name==name)) {             
	    el[i].checked = true;         
   }     
  } 
} 
	 
function clearAll(name) {     
  var el = document.getElementsByTagName('input');     
  var len = el.length;     
  for(var i=0; i<len; i++) {         
   if((el[i].type=="checkbox") && (el[i].name==name)) {             
	    el[i].checked = false;         
   }     
  } 
}

引入多个js文件：

Js代码

1. function _IncludeJS(inc)    
2. {    
3.     var script='<'+'script type="text/javascript" src="'+inc+'"'+'> <'+'/script>';    
4.     document.writeln(script);    
5. }    
6.   
7. _IncludeJS('ajaxServer.js');  

function _IncludeJS(inc) 
{ 
    var script='<'+'script type="text/javascript" src="'+inc+'"'+'> <'+'/script>'; 
    document.writeln(script); 
} 

_IncludeJS('ajaxServer.js');

Js代码

1. /**  
2.  * 验证日期  
3.  */  
4. function checkDateTimeStr(str){   
5.     var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2})$/;    
6.     var r = str.match(reg);    
7.     if(r==null)return false;    
8.     var d=new Date(r[1], r[3]-1,r[4],r[5],r[6]);    
9.     return (d.getFullYear()==r[1] && (d.getMonth()+1)==r[3] && d.getDate()==r[4] && d.getHours()==r[5] && d.getMinutes()==r[6]);   
10. }  

/**
 * 验证日期
 */
function checkDateTimeStr(str){
	var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2})$/; 
	var r = str.match(reg); 
	if(r==null)return false; 
	var d=new Date(r[1], r[3]-1,r[4],r[5],r[6]); 
	return (d.getFullYear()==r[1] && (d.getMonth()+1)==r[3] && d.getDate()==r[4] && d.getHours()==r[5] && d.getMinutes()==r[6]);
}

二、图片控制
(1)css控制

Html代码

1. img {    
2.    max-width:500px;   
3.    width:600px;    
4.    width:expression(width>500?"500px":width+"px");   
5.    overflow:hidden;   
6. }  

img { 
   max-width:500px;
   width:600px; 
   width:expression(width>500?"500px":width+"px");
   overflow:hidden;
}

(2)js控制

Js代码

1. /*********dynamic load image****************/  
2. function createImg(imgSrc){   
3.     var objDiv = document.createElement("DIV");   
4.     objDiv.id = "imgDiv";   
5.     objDiv.innerHTML = '<img src="' + imgSrc + '" onload="javascript:resizeImage(this,236,170);"  border="0"/>';   
6.     document.body.appendChild(objDiv);   
7. }   
8.   
9. /********same scale resize image************/  
10. function resizeImage(imgObj, maxWidth, maxHeight){   
11.     var image=new Image();     
12.     image.src=imgObj.src;   
13.     if(image.width > maxWidth || image.height > maxHeight){      
14.         w=image.width/maxWidth;   
15.         h=image.height/maxHeight;      
16.         if(w > h){    
17.             imgObj.width=maxWidth;      
18.             imgObj.height=image.maxHeight/w;      
19.         }else{     
20.             imgObj.height=maxHeight;      
21.             imgObj.width=image.width/h;      
22.         }   
23.     }    
24. }   
25.   
26. createImg('Sunset.jpg');