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

[b]一、操作table[/b]
.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;
}
}
}


[b]引入多个js文件:[/b]
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]);
}

[b]二、图片控制[/b]
(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');
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值