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

2010-06-02 19:06

一、操作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');