- 浏览: 466140 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuan_bin1990:
您好,请问下demo如何运行啊,准备研究研究,但不知道入口啊。 ...
ssh2(struts2+spring2.5+hibernate3.3)自动生成代码程序 -
luyulong:
[b][/b][i][/i][ ...
jQuery进度条插件 jQuery progressBar -
txin0814:
mark..
读取文件目录 -
vurses:
[align=center][color=red][size= ...
include 与 jsp:include区别 -
Roshan2:
http://lijiejava.iteye.com/blog ...
Spring AOP 入门实例
一、操作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');
发表评论
-
js技巧
2010-06-16 21:50 770事件源对象 event.srcElement.tagName ... -
js得到窗口/对象尺寸/刷新父页面的多种方法
2010-06-16 21:27 1428网页可见区域宽:document.body.clientWid ... -
js之类型转换与引用类型(Boolean/Number/String)
2010-06-16 21:26 1260一、类型转换 1.转换成 ... -
js之本地对象(Array/Date)
2010-06-16 21:26 967一、Array类 1.创建Array对 ... -
js之自定义对象/URI编码
2010-06-16 21:25 1046一、定义对象 1.对象初始化器方式 格式:objectNam ... -
js之正则表达式
2010-06-16 21:22 980一、RegExp 1.定义 Java ... -
javascript keyCode
2010-06-16 21:21 713keycode 8 = BackSpace BackS ... -
JavaScript实用小技巧
2010-06-16 21:17 9251. oncontextmenu="window.e ... -
js日期时间函数(经典+完善+实用)
2010-06-16 20:55 750Date.prototype.isLeapYear 判断闰年D ... -
jQuey语法总结和注意事项
2010-06-16 20:51 10651、关于页面元素的引用 通过jquery的$()引 ... -
Javascript技巧
2010-05-19 16:39 6991. oncontextmenu="window.e ... -
ajax 夸域取数据
2010-05-09 18:46 832package org.test; impor ... -
页面校验通用js
2010-04-25 22:06 836/***************************** ... -
字符串转换成json的三种方式
2010-04-10 09:29 987使用ajax的开发项目过程中,经常需要将json格式的字符串返 ... -
js function汇总
2010-04-10 08:55 9751。无对话框关闭窗口 Js代码 wind ... -
JQuery技巧总结(转载)
2009-12-07 10:03 780一、简介 1.1、概述 随 ... -
JSEclipse 在线安装
2009-11-30 16:30 1271JSEclipse是个Eclipse下的免费Javascrip ... -
精通 JS正则表达式
2009-11-16 12:14 765正则表达式可以: •测试字符串的某个模式。例如,可以对一个输入 ... -
js创建表格
2009-09-28 16:17 2507添加table <table class=& ... -
子窗体于父窗体之间值的传递
2009-09-28 16:15 1160其中window.parent相对于框架(iframe )来 ...
相关推荐
下面将详细介绍如何使用JavaScript来创建带有下拉框和输入框的表格,并提供相关知识点。 首先,让我们理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素开始,其中包含`<tr>`(表格行)元素,每行中又...
3. **JavaScript操作**:使用JavaScript获取表格数据并创建CSV(逗号分隔值)字符串,这是Excel能识别的一种格式。 ```javascript function exportTableToCSV(filename) { var table = document.getElementById('...
在JavaScript的世界里,HTML表格(Table)是一种常用的数据展示方式,而JS操作表格则成为网页动态交互的关键。本文将深入探讨如何使用JavaScript进行表格的创建、修改、删除以及实现一些特殊效果。 首先,我们从...
本主题主要聚焦于如何利用JavaScript动态创建一个包含表格(table)的DOM结构,并且在表格行(tr)中添加可点击的按钮。这通常用于展示数据集,允许用户进行交互操作,比如删除、编辑或查看详情。 首先,我们需要...
该库将提供JavaScript中的DOM操作、事件处理、Ajax等功能,使得与网页元素交互变得更加简单。 接下来,我们需要引入`jquery.table2excel.js`,这是`jquery-table2excel`插件的主要源代码文件。这个插件的核心思想是...
本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建一个漂亮且实用的table表格。 **一、HTML基础表格结构** 首先,我们需要在HTML文档中创建基本的表格结构。一个简单的表格由`...
在网页开发中,表格(Table)是一种常见...总的来说,实现这样一个功能涉及的技术点包括JavaScript DOM操作、事件监听、数组处理以及CSS样式控制。通过合理的编程逻辑和交互设计,可以为用户提供流畅的表格行操作体验。
总的来说,“bootstrap-table-export.js”和“tableExport.js”是增强Bootstrap表格功能的利器,它们简化了数据导出的过程,提高了用户体验,同时也为开发者提供了更灵活的控制选项。在处理大量数据并需要导出功能的...
在JavaScript(JS)中,我们可以对表格进行自定义样式,使其看起来更加美观和交互性更强。本文将深入探讨如何利用JavaScript实现隔行换色、鼠标悬停变色以及点击变色的效果。 首先,让我们理解基本的HTML表格结构。...
在Bootstrap中,可以通过添加`.table-actions`类来创建一个操作列,通常用于显示编辑、删除等操作: ```html <table class="table"> 张三 <td>25 北京 <td class="table-actions"> 编辑 删除 <!-- ...
3. **触发导出**:在JavaScript中,使用jQuery选择器找到你的表格,并调用`.table2excel()`方法。你可以传递一个配置对象来定制导出的行为。 ```javascript $(document).ready(function() { $("#myTable").table2...
3. **bootstrap-table-editable.js**:这是将Bootstrap Table与Bootstrap Editable结合的插件,它扩展了Bootstrap Table的功能,使得表格中的每一行或每一列都能实现类似Bootstrap Editable的编辑功能。用户可以直接...
通过引入这个JS文件,开发者可以利用JavaScript对象和方法来控制表格的行为,例如初始化表格、添加、删除或更新数据。 `bootstrap-table.css` 是样式表文件,负责定义Bootstrap Table的外观和布局。它继承了...
1. 创建弹出层元素:使用`document.createElement('div')`创建一个`<div>`,并设置其class和style属性,以便通过CSS控制外观和位置。 2. 创建表格元素:创建`<table>`,`<tr>`,`<td>`等元素,并填充数据。 3. 将...
综上所述,"前台js将table转为Excel表格下载.rar"中的实现涉及到前端JavaScript技术,包括DOM操作、CSV格式转换、Blob对象以及创建下载链接等步骤,这些知识点对于开发具有数据导出功能的Web应用至关重要。
在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...
D3.js是一个强大的JavaScript库,专门用于数据驱动的文档操作,它使得开发者能够将数据与HTML、SVG和CSS等Web技术紧密结合,创建出各种复杂的可视化图表。本篇将重点介绍D3.js中的基本元素选择与表格(Table)的创建...
根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`<table>`元素,尤其是对表格的行(`<tr>`)和列(`<td>`或`<th>`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...
【基于JS实现table导出Excel并保留样式】 在现代网页应用中,经常需要将网页上的表格数据导出为Excel文件,以便用户进行进一步的数据处理和分析。本文将介绍如何使用JavaScript(JS)来实现这个功能,并重点讨论...