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

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

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

/**
 * 向表格插入一行
 */
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;
   }
  }
}

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 _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]);
}

/**
 * 验证日期
 */
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;
}

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');