晒代码，求改进

checkbox在页面的一些操作
5.htm<html>
<head>
<base target="_self">
<title>checkBox操作</title>
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script type="text/javascript" language="javascript">
function createCheckbox()
{
var str = "";
for(i=0;i<10;i++)
{
str += "<input type=checkbox id=mycheckbox"+(i+1)+" name=mycheckbox>"+(i+1)+"<a href=# onclick=editCheckbox("+(i+1)+")>编辑</a><br>";
}
document.getElementById("mydiv").innerHTML = str;
}
function getAll(ischecked)
{
var items = document.getElementsByTagName("input");
for(i=0;i<items.length;i++)
{
if(items[i].type == "checkbox")
items[i].checked = ischecked;
}
}
function getChecked()
{
var items = document.getElementsByTagName("input");
for(i=0;i<items.length;i++)
{
if(items[i].type == "checkbox")
{
items[i].checked = !items[i].checked;
}
}
}
function delCheck()
{
var items = document.getElementsByTagName("input");
for(i=0;i<items.length;i++)
{
if(items[i].type=="checkbox" && items[i].checked)
{
items[i].nextSibling.nodeValue = "";
var tbody=items[i].parentNode; 
tbody.removeChild(items[i]); 
i--; 
}
}
}
function editCheckbox(myid)
{
var item = document.getElementById("mycheckbox"+myid);
var cvalue = window.showModalDialog("6.htm",item.nextSibling.nodeValue,"dialogHeight=200px;dialogWidth=300px;dialogLeft=128px;dialogTop=128px");
item.nextSibling.nodeValue = cvalue.value;
}
</script>
</head>
<body onload="createCheckbox()">
<form id="myform" action="#" name="myform">
<div id="mydiv">
</div>
<a href="#" onclick="getAll(true)">全选</a><span>      </span><a href="#" onclick="getAll(false)" >全取消</a><span>      </span>
<a href="#" onclick="getChecked()">反选</a><br>
<a href="#" onclick="delCheck()" >删除选中项</a>
</form>
</body>
</html>
6.htm
<html>
<head>
<base target="_self">
<title>编辑</title>
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script type="text/javascript" language="javascript">
function getParentValue()
{
var parentValue = window.dialogArguments;
if(parentValue != "" || parentValue==null)
document.getElementById("mytext").value = parentValue;
}
function sendValue()
{
window.returnValue = document.getElementById("mytext1");
window.opener = null;
window.close();
}
</script>
</head>
<body onload="getParentValue()">
<form id="myform" action="#" name="myform">
<span>原值：</span><input type="text" id="mytext" readonly=true/><br/>
<span>修改：</span><input type="text" id="mytext1" /><br/>
<input type="button" id="mybutton" name="mybutton" value="确定" onClick="sendValue()" />
</form>
</body>
</html>

解决方案 »

  1.   

    没什么问题~~~！
    很多朋友喜欢function createCheckbox()
    {
        var str = "";
        for(i=0;i<10;i++)
        {
            str += "<input type=checkbox id=mycheckbox"+(i+1)+" name=mycheckbox>"+(i+1)+"<a href=# onclick=editCheckbox("+(i+1)+")>编辑</a><br>";
        }
        document.getElementById("mydiv").innerHTML = str;
    }
    像你这样的方式来添加标签.
    其实在标准的xhtml里面可以使用xml dom里面document的createElement()方法来添加标签。
      

  2.   

    不过如果用createElement（）去创建checkbox，有几个问题，第一，父级appendChild（）是添加吗？不会覆盖吧？第二，checkbox后面还有文本，怎么设置呢？
      

  3.   

    是添加，不是覆盖
    checkbox后面有什么文本？其实文本也是Node只是NodeType和Element的NodeType不一样而已你这样写没问题，我说这个是让你有个概念。。
      

  4.   

    也就是说，我要把后面的文本也认为是Node，type选什么呢？循环里面
    var parentElement = document.getElementById("mydiv");
    var str = "";
    for(i=0;i<10;i++)
    {
    var r = document.createElement("input");
    r.type = checkbox;
                    r.setAttribute("id","mycheckbox"+i);
                    r.setAttribute("name","mycheckbox");
    parentElement.appendChild(r);
                    var t = document.createTextNode(i);
                    parentElement.appendChild(t);
    }这样应该可以的，那么如果我有什么排版，还有，如果我有事件，该怎么添加呢？
    难道r.setAttribute("onclick","test()");??
    样式又如何处理？楼上是否有这方面的推荐我看看
      

  5.   

    var items = document.getElementsByTagName("input");
    这个可以提取出一个方法，把items缓存起来！
      

  6.   

    绑定事件：
    ie ： r.attachEvent('click',function(){})
    ff   :  r.addEventListner('click',function(){})
    样式设置：
    r.style.height='30px';
    r.style.width='50px';
    或者：
    r.cssText='width:30px;height:50px';
    或者
    r.setAttribute("class","className")
      

  7.   

    对这个来说，用innerHTML当然方便些，也直观，倒没必要改。若说应该改的，现在看，有这么几处：
    1.
    function getAll(ischecked)
    {
        var items = document.getElementsByTagName("input");
    这样，范围无形中不必要地扩大了。当页面中还有很多其它input时，应该这样写，效率更好：
      var items = document.getElementById("mydiv").getElementsByTagName("input");2.
    function getChecked()
    {
        var items = document.getElementsByTagName("input");
    同上3.
    function delCheck()
    {
        var items = document.getElementsByTagName("input");
    同上4.
    getAll(true);getAll(false)是一律去设置checked属性，而不管当前到底是否有必要去设置，比如，如果当前本来就是全没选的状态，也要逐个去设置为未选中的状态，这是缺乏效率的。
    所以应该在getAll之外设置一个全局变量来记录当前的全选状态。在getAll中让传参与这个状态变量相比较，如果相等，就直接退出，不等才去设置，并变更状态变量。这样，效率得多。5.delCheck()里items[i].parentNode也不是body，用tbody作名称容易歧义,且每次都去items[i].parentNode，也缺乏效率。下面这样更好些:
        var div=document.getElementById("mydiv");
    var items = div.getElementsByTagName("input");
    for(i=0;i<items.length;i++)
    {
    if(items[i].type=="checkbox" && items[i].checked)
    {
    items[i].nextSibling.nodeValue = "";//删除input后面的文字内容
    div.removeChild(items[i]); //items[i].parentNode.removeChild(items[i]); 
    i--;
    }
    }