智能表格

作者 llinzzi
版本 0.9
说明:
当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行
选择checkbox,可以进行复制,删除
双击表格会出现菜单,自动收集该列已存在数据,选中自动填充  这里是亮点
数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送
兼容IE6和Firefox1.5 符合W3C
本表格一切功能都是为了减少输入录入工作,适合大项目开放使用


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="MSThemeCompatible" content="No">
<title>无标题文档</title>
<script type="text/JavaScript">
<!--
//////////////////////////////////////////页面初始化///////////////////////////////////////
beginListen();
//////////////////////////////////////////页面初始化///////////////////////////////////////
//////////////////////////////////////////ajax类///////////////////////////////////////
function Ajax(url,recvT,stringS,resultF) {
    this.url = url;
    this.stringS = stringS;
    this.xmlHttp = this.createXMLHttpRequest();
    if (this.xmlHttp == null) {
        alert("erro");
        return;
    }
    var objxml = this.xmlHttp;
    objxml.onreadystatechange = function (){Ajax.handleStateChange(objxml,recvT,resultF)};
}

Ajax.prototype.createXMLHttpRequest = function() {
    try { return new ActiveXObject("Msxml2.XMLHTTP");    } catch(e) {}
    try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
    try { return new XMLHttpRequest();                   } catch(e) {}
    return null;
}

Ajax.prototype.createQueryString = function () {
    var queryString = this.stringS;
    return queryString;
}

Ajax.prototype.get = function () {
    url = this.url;
    var queryString = url+"?timeStamp=" + new Date().getTime() + "&" + this.createQueryString();
    this.xmlHttp.open("GET",queryString,true);
    this.xmlHttp.send(null);
}

Ajax.prototype.post = function() {
    url = this.url;
    var url = url + "?timeStamp=" + new Date().getTime();
    var queryString = this.createQueryString();
    this.xmlHttp.open("POST",url,true);
    this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    this.xmlHttp.send(queryString);
}

Ajax.handleStateChange = function (xmlHttp,recvT,resultF) {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
        resultF(recvT?xmlHttp.responseXML:xmlHttp.responseText);
        } else {
        alert("您所请求的页面有异常。");
        }
    }
}
//////////////////////////////////////////ajax类///////////////////////////////////////

//////////////////////////////////////////处理鼠标事件///////////////////////////////////////
//表格变色
var toBeColor = "#F8F9FC";
var backColor = "#FFFFFF";
function onChangTrColor(obj) {
    obj.parentNode.style.backgroundColor = toBeColor;
    obj.style.backgroundColor = toBeColor;
    var inputs = obj.parentNode.parentNode.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++ ){
        inputs[i].style.backgroundColor = toBeColor;
        inputs[i].parentNode.style.backgroundColor = toBeColor;
    }
}

function outChangTrColor(obj) {
    obj.parentNode.style.backgroundColor = backColor;
    obj.style.backgroundColor = backColor;
    var inputs = obj.parentNode.parentNode.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++ ){
        inputs[i].style.backgroundColor = backColor;
        inputs[i].parentNode.style.backgroundColor = backColor;
    }
}

//////////////////////////////////////////处理鼠标事件///////////////////////////////////////

//////////////////////////////////////////处理页面操作///////////////////////////////////////
//复制所选
function copySelect(){
    var checkboxs = document.getElementsByName("checkbox");
    for (var i=0; i<checkboxs.length; i++) {
        if(checkboxs[i].checked == true){
        checkboxs[i].checked = false;
        copyTr(checkboxs[i]);
        checkboxs[i].checked = true;
        }
    }
}

function copyTr(obj) {
    var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0]; 
    var Str = obj.parentNode.parentNode;
    var tr =  Str.cloneNode(true);
    tbody.appendChild(tr);
}

//删除所选
function delSelect(){
    var checkboxs = document.getElementsByName("checkbox");
    var table = document.getElementById("tbData");
    var tr = table.getElementsByTagName("tr");
    for (var i=0; i<checkboxs.length; i++) {
        if(tr.length==2){
        checkboxs[i].checked = false;
        return;
        }
        if(checkboxs[i].checked==true){
        removeTr(checkboxs[i]);
        i=-1;
        }
    }
}

function removeTr(obj) {
    var sTr = obj.parentNode.parentNode;
    sTr.parentNode.removeChild(sTr);
}

//全选按钮
function selectAll() {
    var checkboxs = document.getElementsByName("checkbox");
    var mark = true;
    for (var i=0; i<checkboxs.length; i++) {
        if (checkboxs[i].checked==false){mark = false}
    }
    if (mark){
        for (var i=0; i<checkboxs.length; i++) {
            checkboxs[i].checked = false;
        }
    }else{
        for (var i=0; i<checkboxs.length; i++) {
            checkboxs[i].checked = true;
        }
    }
}

//////////////////////////////////////////处理页面操作///////////////////////////////////////

//////////////////////////////////////////处理键盘操作///////////////////////////////////////
//键盘事件
function beginListen(){
    if(document.addEventListener){
    document.addEventListener("keydown",keyDown,true);
    }else{
    document.attachEvent("onkeydown",keyDown);
    }
}
function stopListen(){
    document.detachEvent("onkeydown",keyDown);
}

//处理键盘事件
function keyDown(event){
    if(event.keyCode==13){addTr()}
    if(event.keyCode==46){delTr()}
}

//增加表格
function addTr() {
    var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0]; 
    var sTr = tbody.getElementsByTagName("tr")[0];
    var tr =  sTr.cloneNode(true);
    tbody.appendChild(tr);
}

//增加表格
function addTr() {
    var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0]; 
    var trs = tbody.getElementsByTagName("tr");
    var sTr = trs[trs.length-1];
    var tr =  sTr.cloneNode(true);
    tbody.appendChild(tr);
}

//删除表格
function delTr() {
    var table = document.getElementById("tbData");
    var tr = table.getElementsByTagName("tr");
    if(tr.length==2){return;}
    var lastTr = tr[tr.length-1];
    lastTr.parentNode.removeChild(lastTr);
}

//////////////////////////////////////////处理键盘操作///////////////////////////////////////

//////////////////////////////////////////处理按钮事件///////////////////////////////////////
//自动填充
var currentObj;
function showDiv(event,obj) {
    var eX = event.clientX;
    var eY = event.clientY;
    var sY = document.body.parentNode.scrollTop;
    var dY = eY + sY;
    var divShowInput = document.getElementById("divShowInput");
    divShowInput.style.top = dY + "px";
    divShowInput.style.left = eX+"px";
    divShowInput.style.display = "block";
    currentObj = obj;
    ////智能菜单////
    fixMenu();
    //判断焦点位置
    var tds = obj.parentNode.parentNode.getElementsByTagName("td");
    var tdOrder;
    for (var i = 0; i < tds.length; i++ ){
        if(tds[i] === obj.parentNode){
            tdOrder = i;
        }
    }
    //填充标题标题
    var tdTitleTr = document.getElementById("tbData").getElementsByTagName("tr")[0];
    var tdTitle = tdTitleTr.getElementsByTagName("td")[tdOrder];
    document.getElementById("barTitle").innerHTML = tdTitle.innerHTML;
    //收集表格信息//判断重复
    var trs = obj.parentNode.parentNode.parentNode.getElementsByTagName("tr");
    var autoFillP = document.getElementById("autoFillP");
    var bankM = true;
    for (var i = 0; i <  trs.length; i++ ){
        var inputValue = trs[i].getElementsByTagName("td")[tdOrder].getElementsByTagName("input")[0].value;
        if (inputValue != "") {
            bankM = false;
            var menus = autoFillP.getElementsByTagName("a");
            if(menus.length > 0) {
            var beliveM = true;
                for (var j = 0; j < menus.length; j++ ){
                    if(menus[j].firstChild.nodeValue == inputValue) {
                        beliveM = false;
                    }
                }
                if(beliveM){
                    var Svalue = document.createElement("a");
                    Svalue.setAttribute("href","javascript:void 0");
                    Svalue.onclick = function () {fillInput(this)};
                    var Stext = document.createTextNode(inputValue);
                    Svalue.appendChild(Stext);
                    autoFillP.appendChild(Svalue);
                }
            }else{
                var Svalue = document.createElement("a");
                Svalue.setAttribute("href","javascript:void 0");
                Svalue.onclick = function () {fillInput(this)};
                var Stext = document.createTextNode(inputValue);
                Svalue.appendChild(Stext);
                autoFillP.appendChild(Svalue);
            }
        }
    }
    if(bankM) {
        var Svalue = document.createElement("a");
        Svalue.setAttribute("href","javascript:void 0");
        var Stext = document.createTextNode("数据空");
        Svalue.appendChild(Stext);
        autoFillP.appendChild(Svalue);
    }
}

function fillInput(obj) {
    currentObj.value = obj.innerHTML;
    var divShowInput = document.getElementById("divShowInput");
    divShowInput.style.display = "none";
}

function clearInput() {
    currentObj.value = "";
    var divShowInput = document.getElementById("divShowInput");
    divShowInput.style.display = "none";
}

function hideDiv(obj) {
    obj.parentNode.style.display = "none";
}

//删除智能菜单已有数据
function fixMenu() {
    var autoFillP = document.getElementById("autoFillP");
    var values = autoFillP.getElementsByTagName("a");
    for (var i = values.length-1; i >= 0; i-- ){
        autoFillP.removeChild(values[i]);    
    }
}
//////////////////////////////////////////处理按钮事件///////////////////////////////////////

//////////////////////////////////////////数据发送///////////////////////////////////////

//////////////////////////////////////////数据发送///////////////////////////////////////
function sendData() {
    var sendName = new Array("ok","A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11");
    var trs = document.getElementById("tbData").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
    for (var i = 0; i < trs.length; i++) {
        var sendValue = new Array();
        var values = trs[i].getElementsByTagName("input");
        var postString = sendName[1] + "=" + values[1].value;;
        for (var j = 2; j < values.length; j++) {
            postString = postString + "&" + sendName[j] + "=" + values[j].value;
        }
        var SendAjax = new Ajax("isave.asp",0,postString,sendok);
        SendAjax.post();
        function sendok(revData){
            alert(revData);
        }
    }
}

//////////////////////////////////////////数据发送///////////////////////////////////////

//-->
</script>
<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #E9EDF7;
}
#tbBackground {
    background-color:#FFFFFF;
    text-align:center;
}
#tbData {
    background-color:#DDE3EC;
}
#tbData td {
    background-color:#FFFFFF;
}
#tbData input {
    width:50px;
    border:none;
}
#tbData .checkbox {
    width:15px;
}

#tbData thead {
}

#tbTopOpt a{
    display:block;
    width:80px;
    padding:5px;
    background-color:#F8F9FC;
    border:solid 1px #999999;
    color:#000000;
    text-decoration: none;
}
#tbTopOpt a:hover{
    background-color:#DDE3EC;
}
#tbBomOpt a{
    display:block;
    width:80px;
    padding:5px;
    background-color:#F8F9FC;
    border:solid 1px #999999;
    color:#000000;
    text-decoration: none;
}
#tbBomOpt a:hover{
    background-color:#DDE3EC;
}
#tbData a{
    color:#000000;
    text-decoration: none;
}

#divShowInput {
    position:absolute;
    top:30px;
    left:350px;
    z-index:10;
    background-color:#F8F9FC;
    display:none;
    border:solid 1px #DDE3EC;
    width:100px;
    overflow:hidden;
}
#divShowInput a {
    display:block;
    background-color:#F8F9FC;
    color:#000000;
    text-decoration: none;
    text-align:center;
    width:auto;
}
#divShowInput a:hover {
    background-color:#DDE3EC;
    border-left:solid 2px #FF0000;
    border-right:solid 2px #FF0000;
    color:#FF0000;
}

#divShowInput p {
    cursor:hand;
    margin:0;
    padding:0;
    background-color:#F8F9FC;
    text-align:center;
    border-bottom:double #DDE3EC;
}
-->
</style>
</head>

<body>
<div id="divShowInput">
    <p id="barTitle" onClick="hideDiv(this)"></p>
    <p id="defComP" onClick="hideDiv(this)">
    <a href="javascript:void 0" onClick="clearInput()">清空</a>
    </p>
    <p id="autoFillP">
    <a href="javascript:void 0" onClick="fillInput(this)">Llinzzi</a>
    <a href="javascript:void 0" onClick="fillInput(this)">Huanhuan</a>
    <a href="javascript:void 0" onClick="fillInput(this)">Tom.com</a>
    <a href="javascript:void 0" onClick="fillInput(this)">超级长的长长长长长长</a>
    </p>
</div>
<table id="tbBackground" width="760" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table id="tbTopOpt" width="700" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">复制所选</a></td>
        <td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td>
        <td width="38"> </td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table id="tbData" width="750" border="0" align="center" cellpadding="0" cellspacing="1">
    <thead>
      <tr>
        <td height="25" ><a href="javascript:void 0" onClick="selectAll();">全选</a></td>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
        <td>A5</td>
        <td>A6</td>
        <td>A7</td>
        <td>A8</td>
        <td>A9</td>
        <td>A10</td>
        <td>A11</td>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td><input class="checkbox" type="checkbox" name="checkbox" value="checkbox"></td>
        <td><input name="A1" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A2" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A3" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A4" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A5" type="text"  onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A6" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A7" type="text"  onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A8" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A9" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A10" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
        <td><input name="A11" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td>
      </tr>
      </tbody>
    </table></td>
  </tr>
  <tr>
    <td><table width="700"  border="0" align="center" cellpadding="0" cellspacing="0" id="tbBomOpt">
      <tr>
        <td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">复制所选</a></td>
        <td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td>
        <td width="537"><a href="javascript:void 0" onClick="sendData()">提交</a></td>
        <td width="38"> </td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

无标题文档

0) {
var beliveM = true;
for (var j = 0; j = 0; i-- ){
autoFillP.removeChild(values[i]);
}
}
//////////////////////////////////////////处理按钮事件///////////////////////////////////////
//////////////////////////////////////////数据发送///////////////////////////////////////
//////////////////////////////////////////数据发送///////////////////////////////////////
function sendData() {
var sendName = new Array("ok","A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11");
var trs = document.getElementById("tbData").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i

清空

Llinzzi
Huanhuan
Tom.com
超级长的长长长长长长

复制所选 删除所选
全选 A1 A2 A3 A4 A5 A6 A7 A8 A9 A10 A11
复制所选 删除所选 提交

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 彪哥1.1(智能表格)提供下载

    看到有朋友喜欢,放出下载 点击下载此文件由于是为学习js而做的,所以代码写的自己都很不喜欢:(要继续写只能重写了,看时间吧. 代码转移到prototype1.4增加保存打开功能http://onewww.net/code/table/1.1 /*作品名称:彪哥版本:1.1作者:谷祖林网名:llinzzi网址:http://onewww.net 代码特点整个程序基于Ajax技术制作代码基于prototype1.4.(时间关系并没完全移植完全)代码分离 js css html 代码分离,可以用以任何

  • 智能表格

    作者 llinzzi 版本 0.9 说明: 当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行 选择checkbox,可以进行复制,删除 双击表格会出现菜单,自动收集该列已存在数据,选中自动填充  这里是亮点 数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送 兼容IE6和Firefox1.5 符合W3C 本表格一切功能都是为了减少输入录入工作,适合大项目开放使用 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-

  • JavaScript的ExtJS框架中表格的编写教程

    ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种: JsonStore,SimpleStore,GroupingStore- 一个表格的基本编写过程: 1.创建表格列模型 var cm = new Ext.grid.ColumnModel({ {header:

  • jquery+ajax+text文本框实现智能提示完整实例

    本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord

  • 最棒的Angular2表格控件

    现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为Flex的理念而命名,控件应当包

  • ExtJS 配置和表格控件使用第1/2页

    ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下

  • 基于JavaScript实现智能右键菜单

    通过本文给大家介绍智能右键菜单,需要引入的文件再文末会给出,先给大家展示下代码: 具体代码如下所示: var cityArray = new Array(); cityArray.push("北京"); cityArray.push("上海"); //设置表头的鼠标右击事件 $('th').mousedown(function(e){ var selected = e.target.innerHTML; //3表示右键 if(e.which==3){ if(sele

  • jQuery实现智能判断固定导航条或侧边栏的方法

    本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法.分享给大家供大家参考,具体如下: 这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏.侧边栏.任何DIV层的固定显示:现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了:使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script s

  • AJAX 仿EXCEL表格功能

    仿Excel表格演示 //////////////////////////////////////////变量-初始化/////////////////////////////////////// var toBeColor = "#F8F9FC"; var backColor = "#FFFFFF"; var tableId = "tbData"; var table; var tbody; var divShowInput; window.o

  • jQuery 表格工具集

    jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧. Chromatable JQuery Plugin - 固定表头,可滚动内容区,内容区滚动的时候表头位置保持不变. Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整,分页,排序,行列式样等功能(演示 ).

随机推荐