用Javascript动态添加和删除表格行(2)源代码

* -------------------------------------------------------------------------------------------------------------
*说      明：本程序用于动态添加和删除表格之行(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或表格对象以及标签名，这样才能得到各个表格含有标签的总行数
*作    者：曾次清
*日    期：2004年10月13日
*提    示：如果操作发生了错误，请试着去掉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 ;
}