📄 javascript.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<style>
*{font-size:12px;}
table{ width: auto;height:auto;background:#E8E8E8; margin:0 auto; cursor:pointer; table-layout:fixed}
table th{ background:url(http://www.cpp114.com/cppjob/bg.gif) repeat-x; font-size:12px; padding:2px 0; }
table td{ font-size:12px; text-align:center; padding:2px 0;}
.input {border:none;position:absolute;display:none;text-align:center;}
.select {position:absolute;display:none;}
</style>
<script>
var GridData = {
title: ["姓名","性别","年龄","学历","特长"],
type: [0,1,0,1,0], //编辑框类型 ŀ--textbox Ł---select
order: [-1,-1,-1,-1,-1], //排序类型 Ł----升序 -1---降序
data: [["张三","男",27,"本科","足球"],
["YM","男",26,"本科","中锋"],
["McGrady","男",28,"博士","前锋"],
["James","男",25,"本科","小前锋"],
["Good","女",21,"高中","商品"],
["Fut","男",22,"本科","WAR3"],
["Keens","男",37,"高中","SC"],
["Gruby","女",32,"本科","SC"],
["Grrr","男",19,"硕士","SC"],
["Sky","男",22,"本科","WAR3"],
["Cruise","女",18,"本科","WAR3"],
["Fast","男",23,"本科","WAR3"],
["Kathy","女",21,"硕士","SC"],
["Grose","女",19,"高中","SC"],
["Mut","男",29,"硕士","SC"],
["Ken","男",27,"本科","WAR3"],
["Darkman","男",25,"本科","WAR3"]]
};
var 性别 = ["男", "女"];
var 学历 = ["高中", "本科", "硕士", "博士"];
function MyGrid(data, cnt){
MyGrid.backColor = "#fdfdfd";
MyGrid.hoverColor = "#edfae9";
MyGrid.clickColor = "#e1e6f1";
this.datas = data;
this.container = cnt;
this.table;
this.curRow;
this.curCell;
this.curOrder;
this.editTools = [document.body.appendChild(document.createElement("input")),document.body.appendChild(document.createElement("select"))];
this.editTools[0].className = "input";
this.editTools[1].className = "select";
this.dragBar = []; //拖拉改变尺寸的条
var CurGrid = this;
this.load = function(){ //grid重画模块
/** 加载table **/
var tbStr = [];
tbStr.push("<table cellspacing='1'><tr height='25'>");
for(var o in this.datas.title){
tbStr.push("<th width='70'>" + this.datas.title[o] + (this.curOrder == o?(this.datas.order[o]==1?"↑":"↓"):"") + "</th>");
}//<div style='float:left;height:100%;width:4px;font-size:0px;cursor:e-resize;'></div>
tbStr.push("</tr>");
for(var i in this.datas.data){
tbStr.push("<tr bgcolor=" + MyGrid.backColor + " height='25'>");
for(var j in this.datas.data[i]){
tbStr.push("<td>" + this.datas.data[i][j] + "</td>");
}
tbStr.push("</tr>");
}
tbStr.push("</table>");
this.container.innerHTML = tbStr.join("");
this.table = this.container.firstChild;
/*for(var k in this.datas.title){ //拖拉表格宽度
this.dragBar[k] = this.table.rows[0].cells[k].firstChild;
this.dragBar[k].onclick = function(e){
var eve = e || window.event;
eve.cancelBubble = true;
}
this.dragBar[k].onmousedown = function(e){
var eve = e || window.event;
}
}*/
/** 设置编辑工具 **/
this.editTools[0].onblur = function(){
CurGrid.curCell.removeChild(CurGrid.curCell.firstChild)
CurGrid.curCell.appendChild(document.createTextNode(this.value));
CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = this.value;
this.value = "";
this.style.display = "none";
}
this.editTools[1].onblur = function(){
this.options.length = 0;
this.style.display = "none";
}
this.editTools[1].onchange = function(){
CurGrid.curCell.removeChild(CurGrid.curCell.firstChild)
CurGrid.curCell.appendChild(document.createTextNode(this.value));
CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex] = this.value;
this.options.length = 0;
this.style.display = "none";
}
/** 设置单元格 **/
for(var r=1; r<this.table.rows.length;r++){
this.table.rows[r].onmouseover = function(){ this.style.backgroundColor = MyGrid.hoverColor; }
this.table.rows[r].onmouseout = function(){
if(CurGrid.curRow!=this) this.style.backgroundColor = MyGrid.backColor;
else this.style.backgroundColor = MyGrid.clickColor;
}
for(var c=0;c<this.table.rows[r].cells.length;c++){
this.table.rows[r].cells[c].onclick = function(){
if(CurGrid.curRow) CurGrid.curRow.style.backgroundColor = MyGrid.backColor;
CurGrid.curRow = this.parentNode;
this.parentNode.style.backgroundColor = MyGrid.clickColor;
}
this.table.rows[r].cells[c].ondblclick = function(){
//alert("( " + this.cellIndex + "," + this.parentNode.rowIndex + " ) " + this.firstChild.data);
CurGrid.curCell = this;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.display = "block";
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.width = this.offsetWidth;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.height = this.offsetHeight;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.left = getAbsPos(this).leftx - CurGrid.container.scrollLeft;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.top = getAbsPos(this).topy - CurGrid.container.scrollTop;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].focus();
if(CurGrid.datas.type[this.cellIndex] == 0){
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].select();
}else if(CurGrid.datas.type[this.cellIndex] == 1){
CurGrid.loadSelect(CurGrid.datas.title[this.cellIndex]);
}
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].value = this.firstChild.data;
}
}
}
for(var g=0; g<this.table.rows[0].cells.length;g++){
this.table.rows[0].cells[g].onclick = function(){
CurGrid.datas.order[this.cellIndex] = -CurGrid.datas.order[this.cellIndex];
CurGrid.curOrder = this.cellIndex;
CurGrid.sort(this.cellIndex, CurGrid.datas.order[this.cellIndex]);
}
}
}
this.sort = function(n, type){ //排序
this.datas.data = this.datas.data.sort(function(x,y){if (x[n]>y[n]){return type;}else if(x[n]<y[n]){return -type;}else{return 0;}});
this.load();
}
this.delRow = function(){ //删除行
if(!this.curRow) return;
this.datas.data.splice(this.curRow.rowIndex-1, 1);
this.table.deleteRow(this.curRow.rowIndex);
}
this.loadSelect = function(type){ //读取下拉框内容
var opts = this.editTools[1].options;
for(var o in eval(type)){
var opt = document.createElement("option");
opt.value = opt.text = eval(type)[o];
opts.add(opt);
}
}
}
var grid;
function $(id){
return document.getElementById?document.getElementById(id):eval(id);
}
function getAbsPos(obj){
var objResult = new Object();
objResult.topy = obj.offsetTop;
objResult.leftx = obj.offsetLeft;
while( obj = obj.offsetParent){
objResult.topy += obj.offsetTop;
objResult.leftx += obj.offsetLeft;
}
return objResult;
}
/*---------------------------分页---*/
function Page(data, ctn){
this.data = data;
this.container = ctn;
this.totalCount = data.length;
this.pageSize = 5;
this.pageCount = Math.ceil(this.totalCount/this.pageSize);
this.curPage = 1;
this.go = function(i){
if(isNaN(i) || i<1 || i>this.pageCount) return;
this.curPage = i;
this.showData();
}
this.firstPage = function(){
this.curPage = 1;
this.showData();
}
this.lastPage = function(){
this.curPage = this.pageCount;
this.showData();
}
this.prevPage = function(){
this.curPage --;
if(this.curPage == 0){
this.curPage = 1;
}
this.showData();
}
this.nextPage = function(){
this.curPage++;
if(this.curPage == this.pageCount+1){
this.curPage = this.pageCount;
}
this.showData();
}
this.refresh = function(){
this.totalCount = this.data.length;
this.pageCount = Math.ceil(this.totalCount/this.pageSize);
this.curPage = 1;
this.showData();
}
this.showData = function(){
var tempArr = [];
var start = (this.curPage-1)*this.pageSize;
var len = this.curPage==this.pageCount && (this.totalCount%this.pageSize) > 0?this.totalCount%this.pageSize:this.pageSize;
for(var i=0; i<len;i++){
tempArr[i] = [];
for(var j=0; j<this.data[0].length; j++){
tempArr[i].push(this.data[i+start][j])
}
}
grid.datas.data = tempArr;
grid.load();
}
}
window.onload = init;
var pages;
function init(){
grid = new MyGrid(GridData, $("panel"));
pages = new Page(GridData.data, null);
pages.showData();
}
</script>
<div id="panel" style="width:380px;height:200px;overflow:scroll;">
</div><br>
<div> <a href="javascript:pages.firstPage();">首页</a> <a href="javascript:pages.prevPage();">上页</a>
<a href="javascript:pages.nextPage();">下页</a> <a href="javascript:pages.lastPage();">尾页</a><br><br>
<input id="page" size="3"><button onclick="pages.go($('page').value)">Go</button>
每页条数<select onchange="pages.pageSize=Number(this.value);pages.refresh();"><option value="3">3</option><option value="4">4</option><option value="5" selected>5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div><br>
<input type="button" value="导出当前行" onclick="if(grid.curRow)alert(grid.curRow.innerText);else{alert('请选中一行');}" ><br>
<input type="button" value="导出所有数据" onclick="alert(grid.datas.data.join('\n'))" ><br>
<input type="button" value="删除行" onclick="grid.delRow();" ><br>
<BODY>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -