当前位置：凯发ag旗舰厅登录网址下载 > 编程资源 > 编程问答 >内容正文

编程问答

一个实用的表格（锁定表头，可调整单元格大小，可排序） -凯发ag旗舰厅登录网址下载

发布时间：2024/10/8 编程问答 34 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了一个实用的表格（锁定表头，可调整单元格大小，可排序）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

昨天在网上找到一个不错的表格显示，该表格可以锁定表头，可调整单元格的大小，同时还可以对数据进行排序，显示效果如下：

原代码：

doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html><head><title>表格title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>body {}{
    background: #d4d0c8; scrollbar-arrow-color: #002d96; scrollbar-base-color: #c2cbcf; scrollbar-3d-light-color: #ffffff
}
table {}{
    table-layout: fixed; font-size: 9pt; cursor: default
}
tr {}{
    height: 15px; ; background-color: expression((this.sectionrowindex%2)?"#ffffff":"#efefef")
}
td {}{
    padding-left: 2px
}
#tlist {}{
    border-right: #666 1px solid; margin: 40px 10px 10px 70px; overflow: hidden; border-left: #666 1px solid; width: 600px; border-bottom: #666 1px solid; height: 350px
}
#thead {}{
    margin-top: 0px; background: #efefef; margin-left: -1px; overflow: hidden; ; width: expression(this.parentnode.offsetwidth); height: 22px
}
#tbody {}{
    margin-top: 0px; background: #ffffff; margin-left: -1px; overflow: scroll; ; width: expression(this.parentnode.offsetwidth); ; height: expression(this.parentnode.offsetheight-23)
}
#ttitle {}{
    border-right: buttonshadow 1px solid; border-top: buttonhighlight 1px solid; background: #d6d3ce; border-left: buttonhighlight 1px solid; ; width: expression(this.parentnode.offsetwidth); border-bottom: buttonshadow 1px solid; height: 21px
}
style>

<script language=javascript>
function table() //创建容器
    {
    var mytable = document.createelement("div");
    document.getelementsbytagname("body")[0].appendchild(mytable);
    mytable.setattribute("id" , "tlist");
    var myhead = document.createelement("div");
    mytable.appendchild(myhead);
    myhead.setattribute("id" , "thead");
    var mybody = document.createelement("div");
    mytable.appendchild(mybody);
    mybody.setattribute("id" , "tbody");
    mybody.onscroll = headscroll;
    myhead.innerhtml =""return false\" id=\"myheadtab\" border=1 cellpadding=\"0\" cellspacing=\"0\" bordercolordark=\"#ffffff\" bordercolorlight=\"#6c6969\">";
    mybody.innerhtml =""mybodytab\" border=1 bordercolor=#cccccc style=\"border-collapse:collapse;\" frame=void>";
    addcell();
    }
function addcell() //增加列
    {
    var arg = 1;
    if (arguments.length < 1) //增加空列
        arg = 0;
    for (var i = 0; i < arguments.length; i) //参数不足
        if (arguments[i].length < 1 && arg == 1)
            return;
    var h = document.getelementbyid("myheadtab");
    if (h.rows.length < 1)
        {
        var row = h.insertrow();
        row.setattribute("id" , "ttitle");
        row.onmousedown = changwidth;
        row.onmousemove = changcursor;
        }
    h = h.rows(0);
    var b = document.getelementbyid("mybodytab");
    var tcell;
    var cellindex = h.cells.length - 1;
    if (arguments[3] != undefined)
        if (arguments[3] == -1)
            {
            if (h.cells[0].innertext != "序号")
                return;
            for (var i = 0; i < b.rows.length; i)
                b.rows[i].cells(0).innertext = i  1;
            return;
            }
        else
            cellindex = arguments[3];
    if (cellindex == -1)
        tcell = h.insertcell();
    else
        tcell = h.insertcell(cellindex);
    if (arg == 0)
        {
        tcell.innertext = " ";
        tcell.style.width = 1500;
        }
    else
        {
        tcell.innertext = arguments[0];
        tcell.style.width = arguments[2];
        }
    tcell.otype = arguments[1];
    for (var i = 0; i < b.rows.length; i)
        {
        var bcell = b.rows(i).insertcell(cellindex);
        bcell.style.width = arguments[2];
        if (cellindex == 0)
            bcell.innerhtml = i  1;
        }
    }
function addrow(text) //增加行
    {
    if (text == undefined)
        return;
    var b = document.getelementbyid("mybodytab");
    var len = document.getelementbyid("myheadtab").rows(0).cells;
    var row = b.insertrow();
    var str = text.split(",");
    if (len[0].innertext == "序号")
        str.unshift(row.sectionrowindex  1);
    for (var i = 0; i < len.length; i)
        {
        var cell = row.insertcell();
        if (i  1 != len.length)
            {
            cell.innerhtml = str[i] == undefined ? "" : str[i];
            cell.style.width = document.getelementbyid("myheadtab").rows(0).cells[i].style.width;
            }
        }
    row.onmouseover = function() {
        if (this.style.background == "#2a63de")
            return;
        this.style.background = "#3a6ea5";
        this.style.color = "#ffffff";
        }
    row.onmouseout = function() {
        if (this.style.background == "#2a63de")
            return;
        this.style.background = (this.sectionrowindex % 2) ? "#ffffff" : "#efefef";
        this.style.color = "#000000";
        }
    row.onclick = function() {
        for (var i = 0; i < document.getelementbyid("mybodytab").rows.length; i) //可以用折半查找以提高效率
            {
            /**//* //此行用于清除列选中
            for (var j = 0; j < document.getelementbyid("mybodytab").rows(i).cells.length; j )
                if (document.getelementbyid("mybodytab").rows(i).cells[j].bgcolor == "#2a63de")
                    document.getelementbyid("mybodytab").rows(i).cells[j].bgcolor = "";
            */
            with(document.getelementbyid("mybodytab").rows(i))
                {
                if (style.background == "#2a63de")
                    {
                    style.background = (i % 2) ? "#ffffff" : "#efefef";
                    style.color = "#000000";
                    break;
                    }
                }
            }
        this.style.background = "#2a63de";
        this.style.color = "#ffffff";
        }
    }
function headscroll()
    {
    document.getelementbyid("thead").scrollleft = document.getelementbyid("tbody").scrollleft;
    }
function changwidth()
    {
    var e = event.srcelement;
    if (e == undefined)
        return;
    if (e.tagname != "td")
        return;
    var h = document.getelementbyid("myheadtab");
    var b = document.getelementbyid("mybodytab");
    var cellindex;
    for (var  i = 0; i < h.rows(0).cells.length; i)
        if (h.rows(0).cells[i] == e)
            {
            cellindex = i;
            break;
            }
    var l = e.offsetleft  70;
    if (e.style.cursor == "e-resize") //是改变列宽
        {
        e.setcapture();
        document.onmousemove = function ()
            {
            if (e == undefined)
                return;
            e.style.cursor = "e-resize";
            var w = event.x  document.getelementbyid("thead").scrollleft - l;
            if (w >= 5)
                {
                e.style.width = w;
                if (b.rows.length < 1)
                    return;
                b.rows(0).cells[cellindex].style.width = w;
                if(typeof(y) != "undefined")
                    cleartimeout(y);
                if (b.rows.length < 50) //防止排序有bug
                    y = settimeout("changwidthx(" cellindex ")" , 100);
                else
                    y = settimeout("changwidthx(" cellindex ")" , 800);
            }
            headscroll();
            }
        document.onmouseup = function ()
            {
            if (e == undefined)
                return;
            e.releasecapture();
            e = undefined;
            }
        }
    else
        {
        //排序
        if (event.button == 1)
            tdsort(cellindex);
        //selectcell(cellindex);
        }
    }
function changwidthx(cellindex)
    {
    var b = document.getelementbyid("mybodytab");
    var w = document.getelementbyid("myheadtab").rows(0).cells[cellindex].style.width;
    for (var i = 0; i < b.rows.length; i)
        b.rows(i).cells[cellindex].style.width = w;
    b.rows(0).cells[b.rows(0).cells.length-1].style.width = 0;
    if (b.offsetwidth < b.parentnode.parentnode.offsetwidth)
        b.rows(0).cells[b.rows(0).cells.length-1].style.width = b.parentnode.parentnode.offsetwidth - b.offsetwidth  20;
    headscroll();
    }
function changcursor()
    {
    var e = event.srcelement;
    if (e.tagname != "td")
        return;
    var x = event.x  document.getelementbyid("thead").scrollleft; //此值在固定表头时要更改
    var l = e.offsetleft  70;
    if (x >= l  e.offsetwidth  8)
        e.style.cursor = "e-resize";
    else
        e.style.cursor = "default";
    }
function tdsort(cellindex)
    {
    var text = "↑";
    var s = 1; //向上排
    var h = document.getelementbyid("myheadtab");
    var this = h.rows(0).cells[cellindex];
    if (this.innertext == "序号" || this.innertext == " ")
        return; //没有数据或序号列，不排序
    if (this.innertext.indexof("↑") != -1)
        {
        text = "↓";
        s = 0;
        }
    for (var i = 0; i < h.rows(0).cells.length; i)
        {
        var ttitle = h.rows(0).cells[i];
        if (ttitle.innertext.indexof("↑") != -1 || ttitle.innertext.indexof("↓") != -1)
            {
            ttitle.innertext = ttitle.innertext.substring(0 , ttitle.innertext.length - 2);
            break;
            }
        }
    this.innertext = " " text;
    tsort(cellindex , this.otype , s); //开始排序
    }
function tsort(cellindex , otype , type)
    {
    var temp = document.getelementbyid("mybodytab").tbodies[0].rows;
    var a = new array();
    for (var i = 0; i < temp.length; i)
        a[i] = temp[i];
    a.sort(sortsub(cellindex , otype , type));
    for (var i = 0; i < a.length; i)
        document.getelementbyid("mybodytab").tbodies[0].appendchild(a[i]);
    settimeout("addcell(\"序号\" , \"num\" , 40 , -1)" , 1000);
    }
function parsestr(s)
    {
    return string(s).touppercase();
    }
function parsedate(s)
    {
    return date.parse(s.replace(/\-/g, '/'));
    }
function sortsub(cellindex , otype , type)
    {
    var thistype = string;
    if (otype == "num")
        thistype = number;
    else if (otype == "date")
        thistype = parsedate;
    else if (otype == "str")
        thistype = parsestr;
    return function (x,y)
        {
        if (thistype(x.cells[cellindex].innertext) > thistype(y.cells[cellindex].innertext))
            return type ? 1 : -1;
        if (thistype(x.cells[cellindex].innertext) < thistype(y.cells[cellindex].innertext))
            return type ? -1 : 1;
        return 0;
        };
    }
function window.onload()
    {
    table();
    addcell("姓名" , "text" , 70);
    addcell("年龄" , "num" , 55);
    addcell("性别" , "str" , 55);
    addcell("地址" , "text" , 120);
    addcell("联系电话" , "text" , 120);
    addcell("e-mail" , "text" , 120);
    addcell("序号" , "num" , 40 , 0);
    addcell("身份证号码" , "text" , 120);
    for (var i = 0; i < 30; i)
        addrow("小刚," (24i) ",男,传化物流基地,82878566,lzg1215@hotmail.com,41302619821215");
    }
script>

<meta content="mshtml 6.00.2900.2963" name=generator>head>
<body>body>html>

可惜所有代码都是用javascript写的，数据添加也是用javascript动态添加的。
我想把它应用在asp.net的程序中，通过一个repeater控件将数据库中的数据动态取出来，显示出如上效果。
经过我一个下午的调试修改，终于实现了我的想法。下面是源代码：
default.css:

body {}{
     /**//*background: #d4d0c8;
     scrollbar-arrow-color: #002d96;
     scrollbar-base-color: #c2cbcf;
     scrollbar-3d-light-color: #ffffff*/
     scrollbar-face-color: #ffffff;
    scrollbar-shadow-color: #006699;
    scrollbar-base-color : #ffffff;
    scrollbar-highlight-color: #006699;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #f8f8f8;
    scrollbar-arrow-color: #006699;
}
/**//*table {
    table-layout: fixed;
    font-size: 9pt;
    cursor: default
}*/

.tr {}{
     height: 20px;
     background-color: expression((this.sectionrowindex%2)?"#ffffff":"#efefef")
}
.td {}{
    padding-left: 2px
}

#myheadtab
{}{
   table-layout: fixed; font-size: 9pt; cursor: default
}

#mybodytab
{}{
   table-layout: fixed; font-size: 9pt; cursor: default
}
#tlist {}{
     border-right: #666 1px solid;
     border-left: #666 1px solid;
     border-bottom: #666 1px solid;
     overflow: hidden;
     margin: 40px 10px 10px 70px;
     /**//*
     width: 600px;
     height: 350px;*/

}
#thead {}{
    margin-top: 0px;
    background: #efefef;
    margin-left: -1px;
    overflow: hidden;
    width: expression(this.parentnode.offsetwidth);
    height: 25px;
}
#tbody {}{
    margin-top: 0px;
    background: #ffffff;
    margin-left: -1px;
    overflow: scroll;
    width: expression(this.parentnode.offsetwidth);
    height: expression(this.parentnode.offsetheight-25)
}
#ttitle {}{
    border-right: buttonshadow 1px solid;
    border-top: buttonhighlight 1px solid;
    background: #d6d3ce;
    border-left: buttonhighlight 1px solid;
    width: expression(this.parentnode.offsetwidth);
    border-bottom: buttonshadow 1px solid;
    height: 24px

}

table.aspx

<%@ page language="c#" codebehind="table.aspx.cs" autoeventwireup="false" inherits="javascriptdemo.table" %>
doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
    <head>
        <title>tabletitle>
        <meta name="generator" content="microsoft visual studio .net 7.1">
        <meta name="code_language" content="c#">
        <meta name="vs_defaultclientscript" content="javascript">
        <meta content="mshtml 6.00.2900.2963" name="generator">
        <meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
        <link type="text/css" href="css/default.css" rel="stylesheet">
    head>
    <body>
        <form id="form1" method="post" runat="server">
            <div id="tlist" style="width: 700px; height: 450px">
                <div id="thead">
                    <table onselectstart="return false" id="myheadtab" border="1" cellpadding="0" cellspacing="0"
                        bordercolordark="#ffffff" bordercolorlight="#6c6969">
                        <tr id="ttitle" onmousedown="changwidth();" onmousemove="changcursor();">
                            <td width="35" align="center">序号td>
                            <td width="100" align="center">客户编号td>
                            <td width="200" align="center">公司名称td>
                            <td width="100" align="center">客户名称td>
                            <td width="100" align="center">地址td>
                            <td width="60" align="center">城市td>
                            <td width="100" align="center">电话td>
                            <td width="100" align="center">传真td>
                            <td width="23">td>
                        tr>
                    table>
                div>
                <div id="tbody" onscroll="headscroll();">
                    <asp:repeater id="rpttb" runat="server" enableviewstate="false">
                        <itemtemplate>
                            <tr class="tr" id='<%# string.format("tr{0}",container.itemindex 1)%>' οnmοuseοver='rowover(<%# string.format("tr{0}",container.itemindex1)%>);' οnmοuseοut='rowout(<%# string.format("tr{0}",container.itemindex1)%>);' οnclick='rowclick(<%# string.format("tr{0}",container.itemindex1)%>);'>
                                <td width="35" align="center" class="td"><%# container.itemindex1%>td>
                                <td width="100" align="center" class="td"><%# databinder.eval(container.dataitem,"customerid")%>td>
                                <td width="200" class="td"><%# databinder.eval(container.dataitem,"companyname")%>td>
                                <td width="100" class="td"><%# databinder.eval(container.dataitem,"contactname")%>td>
                                <td width="100" class="td"><%# databinder.eval(container.dataitem,"address")%>td>
                                <td width="60" align="center" class="td"><%# databinder.eval(container.dataitem,"city")%>td>
                                <td width="100" align="center" class="td"><%# databinder.eval(container.dataitem,"phone")%>td>
                                <td width="100" align="center" class="td"><%# databinder.eval(container.dataitem,"fax")%>td>
                                <td>td>
                            tr>
                        itemtemplate>
                        <headertemplate>
                            <table id="mybodytab" border="1" bordercolor="#cccccc" style="border-collapse:collapse;"
                                frame="void">
                        headertemplate>
                        <footertemplate>
                            table>
                        footertemplate>
                    asp:repeater>div>
            div>
        form>
        <script language="javascript">
        function resetcolor()
{
    var obj=document.getelementbyid("mybodytab");
    for(var i = 0; i <obj.rows.length; i)
    {
        obj.rows(i).style.background = (i%2)? "#ffffff" : "#efefef";
    }
}

function rowover(obj) {
    if (obj.style.background == "#2a63de")
    return;
    obj.style.background = "#3a6ea5";
    obj.style.color = "#ffffff";
}
function rowout(obj) {
    if (obj.style.background == "#2a63de")
        return;
    obj.style.background = (obj.sectionrowindex % 2) ? "#ffffff" : "#efefef";
    obj.style.color = "#000000";
}

function rowclick(obj) {
    for (var i = 0; i < document.getelementbyid("mybodytab").rows.length; i) //可以用折半查找以提高效率
        {
            with(document.getelementbyid("mybodytab").rows(i))
            {
                if (style.background == "#2a63de")
                    {
                        style.background = (i % 2) ? "#ffffff" : "#efefef";
                        style.color = "#000000";
                        break;
                    }
                }
        }
    obj.style.background = "#2a63de";
    obj.style.color = "#ffffff";
}

function headscroll()
{
    document.getelementbyid("thead").scrollleft = document.getelementbyid("tbody").scrollleft;
}

function changwidth()
{
    var e = event.srcelement;
    if (e == undefined)
        return;
    if (e.tagname != "td")
        return;
    var h = document.getelementbyid("myheadtab");
    var b = document.getelementbyid("mybodytab");
    var cellindex;
    for (var  i = 0; i <h.rows(0).cells.length; i)
    if (h.rows(0).cells[i] == e)
    {
        cellindex = i;
        break;
    }
        var l = e.offsetleft  70;
        if (e.style.cursor == "e-resize") //是改变列宽
        {
            e.setcapture();
            document.onmousemove = function ()
            {
                if (e == undefined)
                    return;
                e.style.cursor = "e-resize";
                var w = event.x  document.getelementbyid("thead").scrollleft - l;
                if (w >= 5)
                {
                    e.style.width = w;
                    if (b.rows.length < 1)
                        return;
                    b.rows(0).cells[cellindex].style.width = w;
                    if(typeof(y) != "undefined")
                        cleartimeout(y);
                    if (b.rows.length < 50) //防止排序有bug
                        y = settimeout("changwidthx(" cellindex ")" , 100);
                    else
                        y = settimeout("changwidthx(" cellindex ")" , 800);
                }

                headscroll();
            }
            document.onmouseup = function ()
            {
                if (e == undefined)
                    return;
                e.releasecapture();
                e = undefined;
            }
        }
        else
        {
        //排序
        if (event.button == 1)
            tdsort(cellindex);
        }
}

function changwidthx(cellindex)
{
    var b = document.getelementbyid("mybodytab");
    var h = document.getelementbyid("myheadtab");
    var w = document.getelementbyid("myheadtab").rows(0).cells[cellindex].style.width;
    for (var i = 0; i < b.rows.length; i)
        b.rows(i).cells[cellindex].style.width = w;

    b.rows(0).cells[b.rows(0).cells.length-1].style.width = 0;

    if (b.offsetwidth < b.parentnode.parentnode.offsetwidth)
    {
        b.rows(0).cells[b.rows(0).cells.length-1].style.width = b.parentnode.parentnode.offsetwidth - b.offsetwidth  20;
    }
    headscroll();
}

function changcursor()
{
    var e = event.srcelement;
    if (e.tagname != "td")
        return;
    var x = event.x  document.getelementbyid("thead").scrollleft; //此值在固定表头时要更改
    var l = e.offsetleft  70;
    if (x >= l  e.offsetwidth  8)
        e.style.cursor = "e-resize";
    else
        e.style.cursor = "default";
}

function tdsort(cellindex)
{
    var text = "↑";
    var s = 1; //向上排
    var h = document.getelementbyid("myheadtab");
    var this = h.rows(0).cells[cellindex];
    if (cellindex==0 || this.innertext =="")
        return; //没有数据或序号列，不排序
    if (this.innertext.indexof("↑") != -1)
    {
        text = "↓";
        s = 0;//向下排
    }
    for (var i = 0; i < h.rows(0).cells.length; i)
    {
        var ttitle = h.rows(0).cells[i];
        if (ttitle.innertext.indexof("↑") != -1 || ttitle.innertext.indexof("↓") != -1)
        {
            ttitle.innertext = ttitle.innertext.substring(0 , ttitle.innertext.length - 2);
            break;
        }
    }
    this.innertext = " " text;
    tsort(cellindex , this.otype , s); //开始排序
}

function tsort(cellindex , otype , type)
{
    var temp = document.getelementbyid("mybodytab").tbodies[0].rows;
    var a = new array();
    for (var i = 0; i < temp.length; i)
        a[i] = temp[i];
    a.sort(sortsub(cellindex , otype , type));
    for (var i = 0; i < a.length; i)
        document.getelementbyid("mybodytab").tbodies[0].appendchild(a[i]);
}

function parsestr(s)
{
    return string(s).touppercase();
}
function parsedate(s)
{
    return date.parse(s.replace(/\-/g, '/'));
}

function sortsub(cellindex , otype , type)
{
    var thistype = string;
    if (otype == "num")
        thistype = number;
    else if (otype == "date")
        thistype = parsedate;
    else if (otype == "str")
        thistype = parsestr;
    return function (x,y)
        {
            if (thistype(x.cells[cellindex].innertext) > thistype(y.cells[cellindex].innertext))
                return type ? 1 : -1;
            if (thistype(x.cells[cellindex].innertext) < thistype(y.cells[cellindex].innertext))
                return type ? -1 : 1;
            return 0;
        };
}

        script>
    body>
html>

table.aspx.cs

using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
using microsoft.practices.enterpriselibrary.configuration;
using microsoft.practices.enterpriselibrary.common;
using microsoft.practices.enterpriselibrary.data;
namespace javascriptdemo
{
/**////

/// table 的摘要说明。
///

    public class table : system.web.ui.page
    {
        protected system.web.ui.webcontrols.repeater rpttb;
        private void page_load(object sender, system.eventargs e)
        {
            // 在此处放置用户代码以初始化页面


            if(!page.ispostback) {
                 database  db = databasefactory.createdatabase();
                string strsel="select * from customers";
                dataset ds =  db.executedataset(commandtype.text,strsel);
                this.rpttb.datasource =ds;
                this.rpttb.databind();
            }
        }

        web 窗体设计器生成的代码#region web 窗体设计器生成的代码
        override protected void oninit(eventargs e)
        {
            //
            // codegen: 该调用是 asp.net web 窗体设计器所必需的。
            //
            initializecomponent();
            base.oninit(e);
        }

        /**////

        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        ///

        private void initializecomponent()
        {
            this.load = new system.eventhandler(this.page_load);

        }
        #endregion
    }
}
原本想把javascript脚本提出来单独写在一个文件中，可是提出来后一直出错，找不到错误在哪里，只好先这样放着了。

转载于:https://www.cnblogs.com/yknb/archive/2006/09/21/510779.html

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的一个实用的表格（锁定表头，可调整单元格大小，可排序）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

上一篇：
下一篇： sqlserver存储过程/函数加/解密