JavaScript Table行填充

来源：互联网发布：网络渗透技术培训编辑：程序博客网时间：2024/05/16 12:05

　　使用JS脚本操作Table元素，在不同浏览器中操作方法不尽相同。当新建一行之后，IE中可以使用单元格操作来完成单元格的添加，而在FireFox中无法正确通过单元格来操作，而只能使用<td></td>来实现。

　　因此，在编写填充函数时，要注意检测浏览器并分别处理。

　　JS代码如下：

        //往表格某位置插入行
        function insertTableRow(tObj, rowIdx, detail){
            if(tObj == null || attendDetail == null) return false;
            if(rowIdx < 0 || rowIdx > tObj.rows.length) rowIdx = tObj.rows.length;
            var newRow = tObj.insertRow(rowIdx);
            newRow.id = detail["id"]; //可选设置
            var btype = detectBrower();
            if(btype != "IE"){
                var rowHTML = "<td>" + detail["code"] + "</td><td>" + detail["name"] + "</td>";
                newRow.innerHTML = rowHTML;
            }else{
                //IE
                var c = newRow.insertCell();
                c.innerHTML = detail["code"];
                c = newRow.insertCell();
                c.innerHTML = detail["name"];
            }
        }

　　其中，tObj为Table对象，rowIdx为要插入的行位置（从0开始编号），detail为填充对象（具体内容及字段自定）。

　　函数detectBrower定义如下：

function detectBrower()
{
   var sUserAgent = navigator.userAgent;
   var isOpera = sUserAgent.indexOf("Opera") > -1;
   if(isOpera) return "Opera";
   var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1;
   var isSafari = sUserAgent.indexOf("AppleWebKit") > -1 && isKHTML;
   var isKonq = sUserAgent.indexOf("Konqueror") > -1 && isKHTML;
   if(isSafari) return "Safari";
   if(isKonq) return "Konqueror";
   var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;
   if(isIE) return "IE";
   var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;
   if(isMoz) return "Mozilla";
   return "None";
}