`
lzkyo
  • 浏览: 466140 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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');  
分享到:
评论

相关推荐

    js创建table表格

    下面将详细介绍如何使用JavaScript来创建带有下拉框和输入框的表格,并提供相关知识点。 首先,让我们理解HTML表格的基本结构。一个基本的HTML表格由`&lt;table&gt;`元素开始,其中包含`&lt;tr&gt;`(表格行)元素,每行中又...

    js操作table导出excel

    3. **JavaScript操作**:使用JavaScript获取表格数据并创建CSV(逗号分隔值)字符串,这是Excel能识别的一种格式。 ```javascript function exportTableToCSV(filename) { var table = document.getElementById('...

    JS操作table大全

    在JavaScript的世界里,HTML表格(Table)是一种常用的数据展示方式,而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先,我们从...

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格(table)的DOM结构,并且在表格行(tr)中添加可点击的按钮。这通常用于展示数据集,允许用户进行交互操作,比如删除、编辑或查看详情。 首先,我们需要...

    用jquery-table2excel,进行导出excel表格 带图片 jquery.table2excel.js下载

    该库将提供JavaScript中的DOM操作、事件处理、Ajax等功能,使得与网页元素交互变得更加简单。 接下来,我们需要引入`jquery.table2excel.js`,这是`jquery-table2excel`插件的主要源代码文件。这个插件的核心思想是...

    js实现漂亮的table表格

    本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建一个漂亮且实用的table表格。 **一、HTML基础表格结构** 首先,我们需要在HTML文档中创建基本的表格结构。一个简单的表格由`...

    js操作table行的上下移动,置顶置底

    在网页开发中,表格(Table)是一种常见...总的来说,实现这样一个功能涉及的技术点包括JavaScript DOM操作、事件监听、数组处理以及CSS样式控制。通过合理的编程逻辑和交互设计,可以为用户提供流畅的表格行操作体验。

    bootstrap-table-export.js和tableExport.js

    总的来说,“bootstrap-table-export.js”和“tableExport.js”是增强Bootstrap表格功能的利器,它们简化了数据导出的过程,提高了用户体验,同时也为开发者提供了更灵活的控制选项。在处理大量数据并需要导出功能的...

    JS自定义的漂漂亮样式的Table

    在JavaScript(JS)中,我们可以对表格进行自定义样式,使其看起来更加美观和交互性更强。本文将深入探讨如何利用JavaScript实现隔行换色、鼠标悬停变色以及点击变色的效果。 首先,让我们理解基本的HTML表格结构。...

    bootstrap集成table样式的总结

    在Bootstrap中,可以通过添加`.table-actions`类来创建一个操作列,通常用于显示编辑、删除等操作: ```html &lt;table class="table"&gt; 张三 &lt;td&gt;25 北京 &lt;td class="table-actions"&gt; 编辑 删除 &lt;!-- ...

    jquery.table2excel.js(用于table导出Excel文件)

    3. **触发导出**:在JavaScript中,使用jQuery选择器找到你的表格,并调用`.table2excel()`方法。你可以传递一个配置对象来定制导出的行为。 ```javascript $(document).ready(function() { $("#myTable").table2...

    bootstrap table editable js

    3. **bootstrap-table-editable.js**:这是将Bootstrap Table与Bootstrap Editable结合的插件,它扩展了Bootstrap Table的功能,使得表格中的每一行或每一列都能实现类似Bootstrap Editable的编辑功能。用户可以直接...

    bootstrap-table.js

    通过引入这个JS文件,开发者可以利用JavaScript对象和方法来控制表格的行为,例如初始化表格、添加、删除或更新数据。 `bootstrap-table.css` 是样式表文件,负责定义Bootstrap Table的外观和布局。它继承了...

    js弹出层table运用

    1. 创建弹出层元素:使用`document.createElement('div')`创建一个`&lt;div&gt;`,并设置其class和style属性,以便通过CSS控制外观和位置。 2. 创建表格元素:创建`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;td&gt;`等元素,并填充数据。 3. 将...

    前台js将table转为Excel表格下载.rar

    综上所述,"前台js将table转为Excel表格下载.rar"中的实现涉及到前端JavaScript技术,包括DOM操作、CSV格式转换、Blob对象以及创建下载链接等步骤,这些知识点对于开发具有数据导出功能的Web应用至关重要。

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

    D3.JS 基于javascript的图表展示库<四>----基本元素选择与Table

    D3.js是一个强大的JavaScript库,专门用于数据驱动的文档操作,它使得开发者能够将数据与HTML、SVG和CSS等Web技术紧密结合,创建出各种复杂的可视化图表。本篇将重点介绍D3.js中的基本元素选择与表格(Table)的创建...

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

    基于JS实现table导出Excel并保留样式

    【基于JS实现table导出Excel并保留样式】 在现代网页应用中,经常需要将网页上的表格数据导出为Excel文件,以便用户进行进一步的数据处理和分析。本文将介绍如何使用JavaScript(JS)来实现这个功能,并重点讨论...

Global site tag (gtag.js) - Google Analytics