js 动态增加删除 html控件

igelf 2008-03-10 09:39:37

怎么在一个div里动态增加checkbox控件和label控件

...全文

220 15 打赏收藏举报

写回复

15 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

southkingfine 2008-03-10

[Quote=引用 10 楼 cooolbin 的回复:]
再顶
[/Quote]

打赏
举报

回复赞

一把编程的菜刀 2008-03-10

呵呵

打赏
举报

回复赞

yixianggao 2008-03-10

送你三本手册！

DHTML参考手册
http://download.csdn.net/source/308913

样式表中文手册
http://download.csdn.net/source/304124

JScript语言参考
http://download.csdn.net/source/308916

打赏
举报

回复赞

yixianggao 2008-03-10

写个能增能减的，再试试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

</head>

<body>

    <input type="button" id="btnAddChk" value="Add CheckBox" />

    <input type="button" id="btnRemoveChk" value="Remove Selected CheckBoxes" />

    <div id="divContainer"></div>

</body>

<script type="text/javascript">

<!--

function $(sId)

{

    return document.getElementById(sId);

}



var oCon = $("divContainer");



var iIndex = 0;



$("btnAddChk").onclick = function()

{

    var oSection = document.createElement("div");

    oCon.appendChild(oSection);



    var oChk = document.createElement("input");

    oChk.type = "checkbox";

    oChk.id = "chk" + iIndex++;

    oSection.appendChild(oChk);



    var oLab = document.createElement("label");

    oLab.htmlFor = oChk.id;

    oLab.innerHTML = "label for " + oLab.htmlFor;

    oSection.appendChild(oLab);

};



$("btnRemoveChk").onclick = function()

{

    var bIsSelected = false;

    var cChk = oCon.getElementsByTagName("input");

    for (var i=cChk.length-1; i>=0; i--)

    {

        if (cChk[i].type.toLowerCase() == "checkbox" && cChk[i].checked)

        {

            bIsSelected = true;

            oCon.removeChild(cChk[i].parentNode);

        }

    }

    if (!bIsSelected)

    {

        alert("Please selected!");

    }

}

//-->

</script>

</html>

打赏
举报

回复赞

LeeeeSin 2008-03-10

再顶

打赏
举报

回复赞

igelf 2008-03-10

知道了.

打赏
举报

回复赞

LeeeeSin 2008-03-10

http://www.cnblogs.com/xiaotaomaomao/articles/986065.html

打赏
举报

回复赞

hy_lihuan 2008-03-10

就是楼上说的，自己写html当作字符串传到div里面

打赏
举报

回复赞

No_Data_Found 2008-03-10

http://www.cftea.com/c/2007/01/6344G8TRJHVCQ2PD.asp

打赏
举报

回复赞

yixianggao 2008-03-10

试试看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> new document </title>

    <meta name="generator" content="editplus" />

    <meta name="author" content="Gao YiXiang" />

    <meta name="email" content="yixianggao@126.com" />

    <meta name="keywords" content="javascript dhtml dom" />

    <meta name="description" content="I love web development." />

</head>

<body>

    <input type="button" id="btnAddChk" value="Add CheckBox" />

    <div id="divContainer"></div>

</body>

<script type="text/javascript">

<!--

function $(sId)

{

    return document.getElementById(sId);

}



var oCon = $("divContainer");



var iCounter = 0;



$("btnAddChk").onclick = function()

{

    var oChk = document.createElement("input");

    oChk.type = "checkbox";

    oChk.id = "chk" + iCounter++;

    oCon.appendChild(oChk);



    var oLab = document.createElement("label");

    oLab.htmlFor = oChk.id;

    oLab.innerHTML = "label for " + oLab.htmlFor;

    oCon.appendChild(oLab);



    var oBr = document.createElement("br");

    oCon.appendChild(oBr);

};

//-->

</script>

</html>

打赏
举报

回复赞

西安风影 2008-03-10

<script>

function hehe()

{

document.getElementById("div1").innerHTML="<span>hehe</span><input type='checkbox' name='hehe' />"

}

</script>

<div id="div1">

</div>

<input type="button" value="Add" onclick="hehe()" />