自己做的js(二)

本文介绍了一种用于网页中动态加载表格数据的方法,包括表格的格式化、行的添加、选择列及操作行为的添加等功能。此外,还实现了翻页、显示当前页数等交互功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//页动态添加方法
function PageProperty(pname, pageobj1)
{
    var pageobjname, tbname = "", itemcount, pagecount, nowpage, pagesearch = "", rowcont, rownum = 0, otb, nowcellnum = 0, cellcontnum = 0, cellcontstart = 0, jumpcontrol = "";
   
    this.pageobjname = pageobj1;
   
    this.tbname = pname + "table";
   
    this.otb = $(this.tbname);
   
    this.itemcount = 0;
   
    this.pagecount = 0;
   
    this.nowpage = 0;
   
    this.pagesearch = pname + "pagesearch";
   
    this.nowcellnum = 1;
   
    this.rowcont = "";
   
    this.rownum = 0;
   
    this.cellcontnum = 0;
   
    this.cellcontstart = 0;
   
    this.jumpcontrol = this.tbname + "_pagecontrol";
   
}

//格式化内容
PageProperty.prototype.FormatTable = function(tablecont)
{
    this.rowcont = tablecont.split(rowspl);
    this.rownum = this.rowcont.length - 1;
    var jumppagecont = this.rowcont[this.rowcont.length - 1].split(cellspl);
    this.itemcount = parseInt(jumppagecont[0]);
    this.pagecount = parseInt(jumppagecont[1]);
    this.nowpage = parseInt(jumppagecont[2]);
}

//格式化内容
PageProperty.prototype.FormatTableNoPage = function(tablecont)
{
    this.rowcont = tablecont.split(rowspl);
    if(this.rowcont[0] == "") this.rownum = 0;
    else if(this.rowcont[1] == "") this.rownum = 1;
    else this.rownum = this.rowcont.length;
}

//添加行
PageProperty.prototype.AddRow = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    for(var i = 0; i < this.rownum; i++)
    {
        var otr = this.otb.insertRow(i + 1);
        otr.id = this.tbname + "_row_" + (i + 1);
    }
}

//添加选项列
PageProperty.prototype.AddSelect = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    var rcount = this.otb.rows.length;
    for(var i = 0; i < this.rownum; i++)
    {
        var otr = $(this.tbname + "_row_" + (i + 1));
        var ocell = this.otb.rows(i + 1).insertCell(this.nowcellnum - 1);
        ocell.innerHTML = "&nbsp;";
        ocell.style.textAlign = "center";
        ocell.className = cellclass;
        rcount++;
    }
    this.nowcellnum = this.nowcellnum + 1;
}

//给表格添加动作
PageProperty.prototype.AddAct = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    var rowclick = function(pageobj,otb,otr)
    {
        return function()
        {
            PageProperty_showImg(pageobj,otb,otr);
        }
    }
   
    var rowmoveover = function(tbname1, trid, cellcontnum1, cellcontstart1)
    {
        return function()
        {
            PageProperty_rowmouseover(tbname1, trid, cellcontnum1, cellcontstart1);
        }
    }
   
    var rowmoveout = function(tbname1, trid, cellcontnum1, cellcontstart1)
    {
        return function()
        {
            PageProperty_rowmouseout(tbname1, trid, cellcontnum1, cellcontstart1);
        }
    }
    for(var i = 0; i < this.rownum; i++)
    {
        var otr = $(this.tbname + "_row_" + (i + 1));
        otr.attachEvent("onclick", rowclick(this, this.otb, otr));
        otr.attachEvent("onmouseout", rowmoveout(this.tbname, otr.id, this.cellcontnum, this.cellcontstart));
        otr.attachEvent("onmouseover", rowmoveover(this.tbname, otr.id, this.cellcontnum, this.cellcontstart));
    }
}

//填加表格
PageProperty.prototype.SetTable = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    this.cellcontstart = this.nowcellnum;
    for(var i = 0; i < this.rownum; i++)
    {
        var otr = $(this.tbname + "_row_" + (i + 1));
        var cellcont = this.rowcont[i].split(cellspl);
        this.cellcontnum = cellcont.length;
        otr.className = rowclass;
        otr.bgColor = tablebgcolor;
        for(var j = 0; j < cellcont.length; j++)
        {
            var ocell = this.otb.rows(i + 1).insertCell(this.nowcellnum + j - 1);
            ocell.innerHTML = "<input style=/"text-align: center;/" id=/"" + this.tbname + "_row_" + (i + 1) + "_cell_" + (this.nowcellnum + j) + "/" type=/"text/" class=/"" + tabletextclass + "/" value=/"" + cellcont[j] + "/" readonly=/"readonly/" onmouseover=/"this.style.backgroundColor='#effeef'/" onmouseout=/"this.style.backgroundColor='white'/" />";
            ocell.className = cellclass;
        }
    }
    this.nowcellnum = this.nowcellnum + this.cellcontnum;
}

//填加更新
PageProperty.prototype.SetUpTable = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    var rcount = this.otb.rows.length;
    for(var i = 0; i < this.rownum; i++)
    {
        var otr = $(this.tbname + "_row_" + (i + 1));
        var ocell = this.otb.rows(i + 1).insertCell(this.nowcellnum - 1);
        ocell.innerHTML = "<input id=/"" + this.tbname + "_row_" + (i + 1) + "_cell_" + this.nowcellnum + "/" class=/"button1/" type=/"button/" value=/"更新/" onclick=/"" + this.pageobjname + ".upOneRow(" + i + 1 + ")/" //>";
        ocell.style.textAlign = "center";
        ocell.className = cellclass;
        rcount++;
    }
    this.nowcellnum = this.nowcellnum + 1;
}

//填加删除
PageProperty.prototype.SetDelTable = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    var rcount = this.otb.rows.length;
    for(var i = 0; i < this.rownum; i++)
    {
        var otr = $(this.tbname + "_row_" + (i + 1));
        var ocell = this.otb.rows(i + 1).insertCell(this.nowcellnum - 1);
        ocell.innerHTML = "<input id=/"" + this.tbname + "_row_" + (i + 1) + "_cell_" + this.nowcellnum + "/" class=/"button1/" type=/"button/" value=/"删除/" onclick=/"" + this.pageobjname + ".delOneRow(" + i + 1 + ")/" //>";
        ocell.style.textAlign = "center";
        ocell.className = cellclass;
        rcount++;
    }
    this.nowcellnum = this.nowcellnum + 1;
}

//显示页数
PageProperty.prototype.showPageNum = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    $(this.jumpcontrol).rows(0).cells(0).innerHTML = "共<input id=/"" + this.tbname
        + "_recorde/" value=/"" + this.itemcount + "/" type=/"text/" maxlength=/"2/" style=/"background-color: Transparent; border-style: none; text-align: center; width: 50px; height: 14px/" readonly=/"readonly/""
        + " //>条&nbsp;|&nbsp; 第<input id=/"" + this.tbname + "_nowpage/" value=/"" + this.nowpage + "/" type=/"text/" maxlength=/"2/" style=/"background-color: Transparent; border-style: none; text-align: center; width: 30px;"
        + " height: 14px/" readonly=/"readonly/" //>页&nbsp;|&nbsp; 共<input id=/"" + this.tbname + "_pagecount/" type=/"text/" maxlength=/"2/" style=/"background-color: "
        + "Transparent; border-style: none; text-align: center; width: 30px; height: 14px/" readonly=/"readonly/" value=/"" + this.pagecount + "/" //>页";
}

//显示上下页翻页
PageProperty.prototype.showJumpPage = function()
{
    if(this.rowcont[0] == "")
    {
        return;
    }
    var jumpcontrolcont = "";
    if(this.nowpage <= 1)
    {
        jumpcontrolcont = "<span style=/"color: #666666/">首页<//span>&nbsp;<span style=/"color: #666666/">上一页<//span>&nbsp;|&nbsp;";
    }
    else
    {
        jumpcontrolcont = "<span style=/"cursor: hand/" onclick=/"" + this.pageobjname + ".firstPage()/">首页<//span>&nbsp;<span style=/"cursor: hand/" onclick=/"" + this.pageobjname + ".prevPage()/">上一页<//span>&nbsp;|&nbsp;";
    }
    if(this.nowpage == this.pagecount)
    {
        jumpcontrolcont += "<span style=/"color: #666666/">下一页<//span> &nbsp;<span style=/"color: #666666/">尾页<//span>";
    }
    else
    {
        jumpcontrolcont += "<span style=/"cursor: hand/" onclick=/"" + this.pageobjname + ".nextPage()/">下一页<//span>&nbsp;<span style=/"cursor: hand/" onclick=/"" + this.pageobjname + ".lastPage()/">尾页<//span>";
    }
    $(this.jumpcontrol).rows(0).cells(1).innerHTML = jumpcontrolcont;
    $(this.jumpcontrol).rows(0).cells(1).style.width = "158px";
}

//显示指定翻页
PageProperty.prototype.showAppointJumpPage = function()
{
    $(this.jumpcontrol).rows(0).cells(2).innerHTML = "转至第<input type=/"text/" id=/"" + this.tbname + "_currentPage/" style=/"text-align: center; height: "
        + "12px; width: 20px; height: 13px/" onkeypress=/"" + this.pageobjname + ".pagekeypress()/" size=/"2/" maxlength=/"2/" value=/"" + this.nowpage + "/" class=/"input4/" //><input style=/"font-size: smaller;/""
        + " id=/"" + this.tbname + "_jumpButton/" onclick=/"" + this.pageobjname + ".jumpPage()/" type=/"button/" value=/"GO/" class=/"button/" //>";
    $(this.jumpcontrol).rows(0).cells(2).style.width = "100px";
}

//回车转页
PageProperty.prototype.pagekeypress = function()
{
    if(window.event.keyCode==13){
     this.jumpPage();
    }
}

//下页
PageProperty.prototype.nextPage = function()
{
    $(this.tbname + "_currentPage").value = parseInt($(this.tbname + "_nowpage").value) + 1; 
    this.jumpPage();
}

//上页
PageProperty.prototype.prevPage = function prevPage_jf()
{
    $(this.tbname + "_currentPage").value = parseInt($(this.tbname + "_nowpage").value) - 1; 
    this.jumpPage();
}

//首页
PageProperty.prototype.firstPage = function()
{
    $(this.tbname + "_currentPage").value = 1; 
    this.jumpPage();
}

//尾页
PageProperty.prototype.lastPage = function()
{
    $(this.tbname + "_currentPage").value = $(this.tbname + "_pagecount").value;
    this.jumpPage();
}

//跳转页
PageProperty.prototype.jumpPage = function()
{
    var page = $(this.tbname + "_currentPage").value;
    if(page < 1 || isNaN(parseFloat(page))){
     $(this.tbname + "_currentPage").value=1;
     return false;
    }
    if((page - 0) > ($(this.tbname + "_pagecount").value-0)){
     $(this.tbname + "_currentPage").value = $(this.tbname + "_pagecount").value;  
     return false;
    }
    this.callJumpPage();
}

//清表格
PageProperty.prototype.ClearRow = function()
{
    for(var i = this.otb.rows.length - 1; i > 0; i--)
    {
     this.otb.deleteRow(i);
    }
    this.itemcount = 0;
    this.pagecount = 0;
    this.nowpage = 0;
    this.nowcellnum = 1;
    this.rowcont = "";
    this.rownum = 0;
    this.cellcontnum = 0;
    this.cellcontstart = 0;
    $(this.jumpcontrol).rows(0).cells(0).innerHTML = "";
    $(this.jumpcontrol).rows(0).cells(1).innerHTML = "";
    $(this.jumpcontrol).rows(0).cells(2).innerHTML = "";
}

//读取表的值
PageProperty.prototype.readtablecont = function()
{
    var tablecont = "";
    var rowcount = this.otb.rows.length;
    for(var i = 0; i < rowcount - 1; i++)
    {
        for(var j = this.cellcontstart - 1; j < this.cellcontstart + this.cellcontnum - 1; j++)
        {
            tablecont = tablecont + Trim($(this.tbname + "_row_" + (i + 1) + "_cell_" + (j + 1)).value);
            if(j == this.cellcontstart + this.cellcontnum - 2)
            {
                tablecont = tablecont + rowspl;
            }
            else
            {
                tablecont = tablecont + cellspl;
            }
        }
    }
    return tablecont;
}

//带选项的普通填写表格
PageProperty.prototype.addTable = function(tablecont)
{
    //alert($("contractchangetable_pagecontrol"));
    this.ClearRow();
    this.FormatTable(tablecont);
    this.AddRow();
    this.AddSelect();
    this.SetTable();
    this.AddAct();
    this.showPageNum();
    this.showJumpPage();
    this.showAppointJumpPage();
}

//带选项的普通填写表格(不带跳页)
PageProperty.prototype.addTable_NoPage = function(tablecont)
{
    this.ClearRow();
    this.FormatTable(tablecont);
    this.AddRow();
    this.SetTable();
}

//带选项的普通填写表格(不带跳页)
PageProperty.prototype.addTableNoPageContext = function(tablecont)
{
    this.ClearRow();
    this.FormatTableNoPage(tablecont);
    this.AddRow();
    this.SetTable();
}

//显示表格勾选
var PageProperty_showImg = function(pageobj, tb, tr)
{
    var show;
    var col = tr.cells[0];
    if(col.innerHTML=="&nbsp;")
    {
        show = true;
    }
    var rownum = tb.rows.length;
    for(var i = 1;i < rownum;i++)
    {
        tb.rows(i).cells(0).innerHTML = "&nbsp;";
    }
    if(show)
    {
        col.innerHTML="<img src='" + showImgAddress + "'></img>";
        pageobj.doSelectControl(tr);
    }
    else
    {
        pageobj.doNullSelectControl();
    }
}

//鼠标移上变色
var PageProperty_rowmouseover = function(tbname, trid, cellcontnum, cellcontstart)
{
 $(trid).style.backgroundColor = rowmouseovercolor;
 for(var i = 0; i < cellcontnum; i++)
 {
     $(trid + "_cell_" + (cellcontstart + i)).style.backgroundColor = rowmouseovercolor;
 }
}

//鼠标移出变色
var PageProperty_rowmouseout = function(tbname, trid, cellcontnum, cellcontstart)
{
    $(trid).style.backgroundColor = rowmouseoutcolor;
    for(var i = 0; i < cellcontnum; i++)
 {
     $(trid + "_cell_" + (cellcontstart + i)).style.backgroundColor = rowmouseoutcolor;
 }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值