注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

88AVI-WEBZONE8-天空网

是金子总要发光的,但是当满地都是金子的时候,我自己也不知道自己是哪颗了

 
 
 

日志

 
 
关于我

两个人交谈,一个人可以洗耳恭听。但是,三个人则无法互谈这人世最严肃而应深究的事。 我们应该注意自己不用语言去伤害别的同志,但是,当别人用语言来伤害自己的时候,也应该受得起。 要对别人隐瞒我们知识的局限,最可靠的方法就是不要越过那界限。 不登高山,不知天之高也,不临深溪,不知地之厚也。 不飞则已,一飞冲天,不鸣则已,一鸣惊人!!!!!

动态添加和删除表格  

2007-12-13 14:37:38|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

说      明:本程序用于动态添加删除表格之行(TR),并复制行中各标签,复制的标签对象将是表格中第一个含有标签的行

            使用前请确保表格至少有一行可用来复制,并且各列的标签必须单一,而radio组必须先设名称(name),name的字符串不能其它属性重复

            在每行末尾的单元格(TD)内必须有一添加删除行的按钮,

            在按钮的onclick事件中分别调用addRow和delRow方法在该行的下面添加一行和删除该行。

*使用方法:推荐(适用一个页面只处理一个表格的情况)

            (1)initTable(table)            : 初始化表格,需传递表格的id或表格对象。在初始化页面时就需调用该函数。

            (2)addRow()和delRow()        : 分别用于“添加”和“删除”按钮的onClick事件中

            (3)setBaseName(aStrName)    : 在提交表单时,设置表格行中各列标签的名称(从左至右的标签名)。参数为一数组

            (4)getCount()                : 在提交表单时,获取表格含有标签的总行数。

                                            假设用户设置的某个标签name值为"txt",最后表格中各行的标签name值

                                            从上至下将变为"txt_0","txt_1"...,直至"txt_getCount()-1"

            如果一个页面需要操作多个表格,则按下面方法

            (1)addRow(table)和delRow(table)        

                分别用于“添加”和“删除”按钮的onClick事件中,在调用函数时必须传递表格id或表格对象

            (2)setTable(table),setBaseName(aStrName)和getCount()

                提交表单时,分别设置表格的id或表格对象以及标签名,这样才能得到各个表格含有标签的总行数

*提    示:如果操作发生了错误,请试着去掉addRow(table)和delRow(table)函数中的第一个注释,以检查。

*备    注:目前支持的标签有"INPUT","TEXTAREA","SELECT",

            如果要支持更多标签,请修改数组A_TAG_NAME和initTagValue(objTd)函数相应地方。

-------------------------------------------------------------------------------------------------------------- */

var m_objTable;                //需要操纵的表格对象

var m_strError;                //错误信息

var m_aStrTagName;            //标签名,为一个数组,长度为表格的列数

var m_aBgColor;                //各个单元格背景色,数组

var m_aRowHtml;                //各个单元格内的html,数组

var m_aHeight;                //各个单元格高度,数组

var m_aAlign;                //各单元格水平对齐方式

//设置支持的标签

var A_TAG_NAME = new Array("INPUT","TEXTAREA","SELECT");

// ----------------------  初始化表格  ---------------------- //

function initTable(table)

{

    if( typeof(table) == "undefined" )

    {

        alert("请传入参数:表格对象或表格id!");

        return;

    }

    setTable(table);    

    getRowProperty(getStartRow());        //获取行的相关属性

}//end initTable(table)

// -------------------  设置表格id或者表格对象 ------------------- //

//如果不用此函数设置,则调用addRow和delRow函数时必须设置

function setTable(table)          

{

    if(typeof(table) == "string")

        this.m_objTable = getObjTableByID(table);

    else if(typeof(table) == "object")

        this.m_objTable = table;

}

// ---------------------- 设置表格各列中标签(HTML标签)的初始名称  ---------------------- //

function setBaseName(aStrName)

{

    if(typeof(m_objTable) == "undefined")

    {

        alert("您没有设置表格对象或表格id");

        return;

    }

    m_aStrTagName = aStrName;

    setTagName(getStartRow(),getEndRow(),0);

}//end setBaseName

// ---------------------- 获取动态表格行数  ---------------------- //

//只是能动态添加删除的行数

function getCount()

{

    return (getEndRow() - getStartRow() + 1);

}

// ---------------- 在当前行的下方添加一行  ---------------- //

function addRow(table)

{

    //if(!isParameterTrue(addRow,table))    {alert(m_strError);return;}

    if( typeof(table) != "undefined" )    initTable(table);

    

    //得到当前行的索引

    var intRowIndex = getRowIndex();

    var intNewTrIndex = intRowIndex + 1;

    var aStrRowHtml = getNewRowHtml(getStartRow());

    m_objTable.insertRow(intNewTrIndex);

    

    //将当前行各单元的innerHTML赋予新增行对应的各单元格

    for(var i = 0;i < aStrRowHtml.length;i ++)

    {

        m_objTable.rows(intNewTrIndex).insertCell();

        m_objTable.rows(intNewTrIndex).cells(i).align = m_aAlign[i];

        if( m_aBgColor[i] != "")

        {

            m_objTable.rows(intNewTrIndex).cells(i).bgColor = m_aBgColor[i];

        }

        if( m_aHeight[i] != "")

        {

            m_objTable.rows(intNewTrIndex).cells(i).height = m_aHeight[i];

        }

        m_objTable.rows(intNewTrIndex).cells(i).innerHTML = aStrRowHtml[i];

        //最后一列为“添加行”、“删除行”的按钮,不需要赋予初值,其它列需要

        if( i != (aStrRowHtml.length - 1))

            initTagValue(m_objTable.rows(intNewTrIndex).cells(i));

    }

}//end addRow

// ---------------------------- 删除当前行  ---------------------------- //

function  delRow(table)  

{  

    try  

    {  

        //if(!isParameterTrue(delRow,table))    {alert(m_strError);return;}

        if( typeof(table) != "undefined" )        setTable(table);

        

        var Elm  =  event.srcElement;

        while(Elm  &&  Elm.tagName  !=  "TR")  

        {  

            Elm  =  Elm.parentElement;  

        }

        var intThisIndex = Elm.rowIndex;

        Elm.parentElement.deleteRow(intThisIndex);  

    }  

    catch(ex)  

    {  

        alert("delRow() Err  5001:\r\n"  +  ex);  

        m_strError += "delRow() Error" + ex;

    }  

}//end delRow() method

// -------------------------  根据表格id得到表格对象  ------------------------- //

//如果该id不存在,则返回null

function getObjTableByID(tableID)

{

    return document.getElementById(tableID);

}

/* ------------------------------------------------------------------------------------------------------

*功  能:设置各个单元格中标签名称,将从指定的起始行设置到指定的结束行

*参  数:intStartRow :开始要设置名称的标签所在行索引

            intEndRow : 最后要设置名称的标签所在行索引

            intStartNo : 标签的起始编号,逐个增加

------------------------------------------------------------------------------------------------------ */

function setTagName(intStartRow,intEndRow,intStartNo)

{

    for( var i = intStartRow; i <= intEndRow;i ++ )

    {

        for( var j = 0;j < m_aStrTagName.length;j ++ )

        {

            var strBaseName = m_aStrTagName[j];

            var strTagName = strBaseName + "_" + intStartNo;

            var objTd = m_objTable.rows(i).cells(j);

            var objTagList;

            for(var m = 0;m < A_TAG_NAME.length;m ++)

            {

                objTagList = objTd.getElementsByTagName(A_TAG_NAME[m]);

                if( objTagList.length != 0 )

                    break;

            }

            if( objTagList.length == 0 )

            {

                alertTagName();

                return;

            }

            for( var m = 0; m < objTagList.length;m ++ )

                objTagList[m].setAttribute("name",strTagName);

        }

        intStartNo ++;

    }

}//end setTagName() method

// ----------------------------------  给标签赋予初值   ---------------------------------- //

//将文本框赋予空值,如果是radio、checkbox标签,则将它们checked属性设为false

//如果是select标签,则选中第一行

function initTagValue(objTd)

{

    var strSetValue = "";

    var strInputType = "";        //input标签的型别,如radio,checkbox等

    var objTagList;

    var strTagName;

    for( var i = 0;i < A_TAG_NAME.length;i ++ )

    {

        objTagList = objTd.getElementsByTagName(A_TAG_NAME[i]);

        if( objTagList.length != 0 )

        {

            strTagName = A_TAG_NAME[i];

            break;

        }

    }

    for( var m = 0; m < objTagList.length;m ++ )

    {

        switch(strTagName)

        {

            case "INPUT" :

                    strInputType = objTagList[m].type;

                    if( strInputType == "text" )

                        objTagList[m].setAttribute("value",strSetValue);

                    else if( strInputType == "radio" ||  strInputType == "checkbox")

                        objTagList[m].setAttribute("checked",false);

                break;

                

            case "TEXTAREA" :

                    objTagList[m].setAttribute("value",strSetValue);

                break;

            case "SELECT" :

                    objTagList[m].setAttribute("selectedIndex",0);

                break;

        }//end switch

    }//end for

}//end initTagValue(objTd)

/* ------------------------------------------------------------------------------------------------------

*功  能:判断调用各个方法传入的参数是否正确,并得到错误信息,如正确,则错误信息为空

*参  数:objFunction : 调用该函数的函数名

            table :表格id或者表格对象

  ------------------------------------------------------------------------------------------------------ */

function isParameterTrue(objFunction,table)

{

    m_strError = "";

    var bolRet = true;

    var intParaLen = objFunction.arguments.length;

    if(intParaLen > 1)

    {

        m_strError +=  "对不起,传入该方法的参数至多只能为一个,即表格id或表格对象!\n";

        bolRet = false;

    }

    if(intParaLen == 1)    {setTable(table);}

    if(typeof(m_objTable) == "undefined" || m_objTable == null)

    {

        m_strError += "目前您传入的参数不正确!\n您需传入表格id或者表格对象!\n";

        bolRet = false;

    }

    else

    {//m_objTable为null时,使用m_objTable.tagName有错

        if(m_objTable.tagName != "TABLE")

        {

            m_strError += "您设置的参数不是表格的id或表格对象!\n";

            bolRet = false;

        }

    }

    return bolRet;

}//end isParameterTrue

// ---------------  当标签超出规定范围(A_TAG_NAME)时,弹出对话框 ---------------  //

function alertTagName()

{

    var strTagName = "";

    for(var m = 0;m < A_TAG_NAME.length;m ++)

        strTagName = strTagName + A_TAG_NAME[m] + ",";

    strTagName = strTagName.substring(0,strTagName.lastIndexOf(",")) + ".";

    alert("对不起,目前支持的标签仅限:" + strTagName + "\n。请在JS文件中添加你想要支持的标签");

}

// --------------------  获取表格总行数  -------------------- //

function getRowCount()    

{

    return m_objTable.rows.length;

}

// --------------------  获取表格总列数  -------------------- //

//取得最大列数

function getCellCount()    

{

    return m_objTable.rows( getRowCount() - 1 ).cells.length;

}

// --------------------  获取某行的总列数  -------------------- //

function getRowCellCount(intRowIndex)    

{

    return m_objTable.rows(intRowIndex).cells.length;

}

// --------------------  获取开始有标签的行号  -------------------- //

//获取开始有标签(radio、text等)的行号,主要是为了得到标签命名与行号对应的关系

//    标签命名规则为英文名称加上数字序号,序号从0开始

function getStartRow()

{

    var objTd;

    var strHtml = "";

    for( var i = 0;i < getRowCount();i ++ )

    {

        for( var j = 0;j < getCellCount();j ++ )

        {

            if( getRowCellCount(i) <= j )

                break;

            objTd = m_objTable.rows(i).cells(j);

            strHtml = objTd.innerHTML;

            for(var m = 0;m < A_TAG_NAME.length;m ++)

            {

                if( strHtml.indexOf(A_TAG_NAME[m]) != -1 )

                {

                    return i;    

                }

            }

        }

    }

}//end getStartRow()

// ----------------- 获得有标签的最后一行的索引 ----------------- //

function getEndRow()

{

    var intStart = getRowCount() - 1;

    for( var i = intStart;i >= 0;i -- )

    {

        for( var j = 0;j < getCellCount();j ++ )

        {

            var strHtml = m_objTable.rows(i).cells(j).innerHTML;

            for(var m = 0;m < A_TAG_NAME.length;m ++)

            {

                if( strHtml.indexOf(A_TAG_NAME[m]) != -1 )

                {

                    return i;    

                }

            }

        }

    }

}//end getEndRow()

// ------------------ 获取指定行的相关属性 ------------------ //

//如各单元格背景色,对齐方式,以及html,放入全局数组中

//如果有radio,则要替换其name属性

function getRowProperty(intRowIndex)

{

    var intCellCount    = getCellCount();

    m_aRowHtml            = new Array(intCellCount);

    m_aAlign            = new Array(intCellCount);

    m_aBgColor            = new Array(intCellCount);

    m_aHeight            = new Array(intCellCount);

    var objTd;

    for(var i = 0;i < intCellCount;i ++)

    {

        objTd = m_objTable.rows(intRowIndex).cells(i);

        m_aAlign[i]        = objTd.align;

        m_aBgColor[i]    = objTd.bgColor;

        m_aRowHtml[i]     = objTd.innerHTML;

        m_aHeight[i]    = objTd.height;

        if( m_aAlign[i] == "" )

            m_aAlign[i] = "left";

        if( m_aBgColor[i] == "")

            m_aBgColor[i] = m_objTable.rows(intRowIndex).bgColor;

        if( m_aHeight[i] == "")

            m_aHeight[i] = m_objTable.rows(intRowIndex).height;

    }

}//end getRowProperty

// ----------------------------- 获取新增行的html  ----------------------------- //

function getNewRowHtml(intRowIndex)

{

    var intCellCount    = getCellCount();

    var aStrRowHtml        = new Array(intCellCount);

    var strOldName = "";                        //radio的起始属性

    var strNewName = "";                        //给radio赋予的新name

    var objTd;

    var objTagList;

    for( var i = 0;i < intCellCount;i ++ )

    {

        var strHtml =  m_aRowHtml[i];

        if(strHtml.toLowerCase().indexOf("radio") != -1)

        {

            strNewName = getRandomName();

            objTd = m_objTable.rows(intRowIndex).cells(i);

            objTagList = objTd.getElementsByTagName("INPUT");

            strOldName = objTagList[0].name;

            while(strHtml.indexOf(strOldName) != -1 )

            {

                strHtml = strHtml.replace(strOldName,strNewName);

            }

        }

        aStrRowHtml[i] = strHtml;

    }

    return aStrRowHtml;

}

// -----------------  获取当前行的索引  ----------------- //

function getRowIndex()

{

    try

    {        

        var Elm  =  event.srcElement;

        while(Elm  &&  Elm.tagName  !=  "TR")  

        {  

            Elm  =  Elm.parentElement;  

        }

        var intRowIndex = Elm.rowIndex;

        return intRowIndex;

    }

    catch(ex)  

    {  

        alert("getRowIndex() Err  5001:\r\n"  +  ex);  

        m_strError += "getRowIndex() Error" + ex;

    }  

}//end getRowIndex() method

// -----------------  获取随机名称  ----------------- //

function getRandomName()

{

    var strRet = 0;

    var d = new Date();

    strRet = d.getHours().toString() + d.getMinutes().toString() + d.getSeconds().toString() + d.getMilliseconds().toString();

    return strRet;

}

  评论这张
 
阅读(1110)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018