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

一、操作table

.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;
}

/**
 * 创建表格
 * 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;
}

/**
 * 向表格插入一行
 */
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)分组的全选与取消全选

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文件：

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

_IncludeJS('ajaxServer.js');

/**
 * 验证日期
 */
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控制

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

(2)js控制

/*********dynamic load image****************/
function createImg(imgSrc){
	var objDiv = document.createElement("DIV");
	objDiv.id = "imgDiv";
	objDiv.innerHTML = '<img src="' + imgSrc + '" onload="javascript:resizeImage(this,236,170);"  border="0"/>';
	document.body.appendChild(objDiv);
}

/********same scale resize image************/
function resizeImage(imgObj, maxWidth, maxHeight){
	var image=new Image();	
	image.src=imgObj.src;
	if(image.width > maxWidth || image.height > maxHeight){   
		w=image.width/maxWidth;
		h=image.height/maxHeight;   
	    if(w > h){ 
			imgObj.width=maxWidth;   
			imgObj.height=image.maxHeight/w;   
	    }else{  
			imgObj.height=maxHeight;   
			imgObj.width=image.width/h;   
	    }
	} 
}

createImg('Sunset.jpg');

评论

1 楼 junsheng100 2009-03-08  

[color=orange][/color]

OK!正在找！
多谢！