js动态添加删除表格元素(兼容IE和Firefox)

最新推荐文章于 2024-07-12 14:12:22 发布

lansky54

最新推荐文章于 2024-07-12 14:12:22 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： firefox ie border function button table

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在项目中做的一个表格的操作(DIV添加和删除表格)感觉还蛮好用的，与大家分享下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js动态添加删除表单元素</title>
<script type="text/javascript">
var Prototype = {//判断浏览器类型
Browser: {
    IE:     !!(window.attachEvent && !window.opera),
    Opera: !!window.opera,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
}
};

function addentityss(divname){//添加的方法
    //在firefox中firstChild方法无效，用childNodes[]来代替。
    var divchildclone = Prototype.Browser.IE ?
        document.getElementById(divname).firstChild.cloneNode(true) :
        document.getElementById(divname).childNodes[1].cloneNode(true);
    var tagname = divname + "s";
    if (divname != "coloader") {
        document.getElementById(tagname).appendChild(divchildclone);
    } else {
        if (coloaders.childNodes.length == 0) {
            document.getElementById(tagname).appendChild(divchildclone);
        }
    }
    document.getElementById(tagname).style.display = "";
}

function addAddress(obj){//调用添加的方法
    var id = document.getElementById(obj);
    if (id.value.length==0 || isNaN(id.value)){
        alert("请输入添加数量！");
        id.value = "";
        id.focus();
        return;
    } else {
        for (var i=0;i<id.value;i++){//循环添加
            addentityss("divadd");
        }
    }
}

function deletethis(obj,divname){//checkbox选择删除
    var flg=confirm("确定要删除这行记录？");
    if(flg==1){
        var nodes=obj.parentNode.parentNode.parentNode.parentNode;
        var node=nodes.parentNode;
        var divid=node.getAttribute("id");
        if(divid=="bruce"){//指定的ID名称(可选)
            document.getElementById("bruce").removeChild(nodes);
        }else{
            document.getElementById(divname).removeChild(nodes);
        }
    }
    obj.checked=false;
    return;
}
</script>
</head>

<body>
<center><h2>js动态添加删除表单元素</h2></center>
<table border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <table border="1" width="700">
            <tr>
                  <td width="20">Del</td>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td><div id="divadds">
        <table border="1" width="700">
            <tr>
                  <td><input type="checkbox" name="addr" οnclick="deletethis(this,'divadds')"/></td>
                <td><input name="textfield342" type="text"/></td>
                <td><input name="textfield342" type="text"/></td>
                <td><input name="textfield342" type="text"/></td>
                <td><input name="textfield342" type="text"/></td>
            </tr>
        </table></div>
    </td>
</tr>
<tr>
    <td align="right">
        <input type="text" name="num" id="numId" size="2" value="1" maxlength="2"/>
        <input type="button" name="button" value="加地址" οnclick="addAddress('numId');"/>
    </td>
</tr>
</table>
<p> </p>

<div id="divadd" style="display:none">
<table border="1" width="700">
    <tr>
        <td><input type="checkbox" name="addr" οnclick="deletethis(this,'divadds')"/></td>
        <td><input name="textfield342" type="text"/></td>
        <td><input name="textfield342" type="text"/></td>
        <td><input name="textfield342" type="text"/></td>
        <td><input name="textfield342" type="text"/></td>
    </tr>
</table>
</div>
</body>
</html>

lansky54

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态添加删除表格元素(兼容IE和Firefox)

最近在项目中做的一个表格的操作(DIV添加和删除表格)感觉还蛮好用的，与大家分享下js动态添加删除表单元素var Prototype = {//判断浏览器类型 Browser: { IE: !!(window.attachEvent && !window.opera), Opera: !!window.opera, WebKit: navigator.userAg
复制链接

扫一扫