- 浏览: 458233 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 745事件源对象 event.srcElement.tagName ... -
js得到窗口/对象尺寸/刷新父页面的多种方法
2010-06-16 21:27 1402网页可见区域宽:document.body.clientWid ... -
js之类型转换与引用类型(Boolean/Number/String)
2010-06-16 21:26 1227一、类型转换 1.转换成 ... -
js之本地对象(Array/Date)
2010-06-16 21:26 927一、Array类 1.创建Array对 ... -
js之自定义对象/URI编码
2010-06-16 21:25 1007一、定义对象 1.对象初始化器方式 格式:objectNam ... -
js之正则表达式
2010-06-16 21:22 940一、RegExp 1.定义 Java ... -
javascript keyCode
2010-06-16 21:21 682keycode 8 = BackSpace BackS ... -
JavaScript实用小技巧
2010-06-16 21:17 9051. oncontextmenu="window.e ... -
js日期时间函数(经典+完善+实用)
2010-06-16 20:55 727Date.prototype.isLeapYear 判断闰年D ... -
jQuey语法总结和注意事项
2010-06-16 20:51 10381、关于页面元素的引用 通过jquery的$()引 ... -
Javascript技巧
2010-05-19 16:39 6741. oncontextmenu="window.e ... -
ajax 夸域取数据
2010-05-09 18:46 805package org.test; impor ... -
页面校验通用js
2010-04-25 22:06 809/***************************** ... -
字符串转换成json的三种方式
2010-04-10 09:29 964使用ajax的开发项目过程中,经常需要将json格式的字符串返 ... -
js function汇总
2010-04-10 08:55 9491。无对话框关闭窗口 Js代码 wind ... -
JQuery技巧总结(转载)
2009-12-07 10:03 758一、简介 1.1、概述 随 ... -
JSEclipse 在线安装
2009-11-30 16:30 1246JSEclipse是个Eclipse下的免费Javascrip ... -
精通 JS正则表达式
2009-11-16 12:14 733正则表达式可以: •测试字符串的某个模式。例如,可以对一个输入 ... -
js创建表格
2009-09-28 16:17 2479添加table <table class=& ... -
子窗体于父窗体之间值的传递
2009-09-28 16:15 1138其中window.parent相对于框架(iframe )来 ...
相关推荐
一个基本的table结构,增加了一些简单的样式,三个按钮分别对应创建、清空,和一个预留。 <!DOCTYPE HTML> <html> <head> <title>table</title> <meta charset='utf-8'
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# ...
<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var ...
roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章(\c13) 示例描述:介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...
最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家, 1、效果图 2、html代码 <table id=table></table> 3、javascript代码 $(#table).bootstrapTable({ dataType: json, method: 'get', ...
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有...
在您的项目中以CRUD Table样式包括css。 例子 没有比例子更好的学习方法了。 我们创建了一些组件基本用法的示例。 基本范例 分页示例 基本范例 此示例显示了基本的CRUD(创建,读取,更新和删除)和排序操作。 ...
* 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator....
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 表格类 下表样式可用于表格中: , <th> 和 <td> 类 下表的类可用于表格的行或者单元格: 基本的表格 如果您想要一个只带...
安装,运行$ npm install react-table-filter --save 此时,您可以按以下方式在应用程序中导入react-table-filter及其样式:import TableFilter from 'react-table-filter' ;// Be sure to include styles at some ...
此程序包仅包含此库的核心软件-要正确设置样式,还必须包括KeyTable的样式程序包。 样式选项包括DataTable的本地样式, 和 。 借助KeyTable,您可以在DataTables增强型表(如Excel电子表格)上使用键盘导航-单元格...
前言:之前介绍...x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、Jquery。大致效果如下图: 根据博主一贯的风格,这里肯定是选用第一种喽。首先还是给出开
该代码展示了如何使用 JavaScript 来控制表格行的展开和隐藏,并提供了一些有用的知识点,包括 JavaScript 语言基础、DOM 操作、事件监听、CSS 样式、HTML 结构、JavaScript 函数、JavaScript 对象和 Browser 兼容性...
ScrollStep (52) 间歇滚动间距 (可选,默认为翻屏宽/高度,该数值与延迟均为0则为鼠标悬停控制,-1禁止鼠标控制) 使用建议: 1、建议直接赋予容器的显示区域的宽度和高度,如(;height:52px;">......) 2、建议...
要实现这个功能,我们需要使用 JavaScript 控制遮罩层的显示和隐藏,并使用 CSS 设置遮罩层的样式。首先,我们需要在 HTML 中添加一个容器元素,并在 JavaScript 中获取该元素。然后,我们可以使用 JavaScript 控制...
本工程旨在演示如何在java Web中使用KindEditor、如何使用Servlet获取到该文本编辑域的值以及如何从数据库中取出值并在jsp页面中显示出来。 说明:本工程中的KindEditor保留了上传图片的功能,所以是一个“重量级”...
2.3 使用JavaScript来与用户交互 2.4 绕开脚本陷阱 2.5 总结 第3章 开发环境和调试方法 3.1 我能用什么来编写脚本--适合编写JavaScript的文本编辑器 3.2 来自浏览器的支持 3.3 集成开发环境 ...
table.js table.css 调用 $('选择器').cloudDataTable({ 配置 }); ps: 会在调用时直接运行 不会等到onload什么的 支持对选择器选中的元素的继续链式调用,如$('table').cloudDataTable.css('height', '3px''); 样式...
Ajax-vue2-bootstrap-table.zip,可排序和可搜索的表,作为vue2组件,使用引导样式。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的...