晒代码，求改进

macdonald25 2010-10-18 02:30:44

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>

...全文

124 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

macdonald25 2010-10-19

打赏
举报

谢谢各位支持！~获益匪浅！！

碧海情天-赵亮 2010-10-19

打赏
举报

对这个来说，用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--;

		}

	}

zjhiphop2006 2010-10-18

打赏
举报

[Quote=引用 8 楼 macdonald25 的回复:]

也就是说，我要把后面的文本也认为是Node，type选什么呢？循环里面
var parentElement = document.getElementById("mydiv");
var str = "";
for(i=0;i<10;i++)
{
var r = document.createElement("input");
r.type = checkbox;

……
[/Quote]
绑定事件：
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")

zhangshaolongjj 2010-10-18

打赏
举报

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

zknbly 2010-10-18

打赏
举报

转转，看看哦！~

地狱咆哮者 2010-10-18

打赏
举报

没分了转转

macdonald25 2010-10-18

打赏
举报

也就是说，我要把后面的文本也认为是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()");??
样式又如何处理？楼上是否有这方面的推荐我看看

Mr-Jee 2010-10-18

打赏
举报

是添加，不是覆盖
checkbox后面有什么文本？

其实文本也是Node只是NodeType和Element的NodeType不一样而已

你这样写没问题，我说这个是让你有个概念。。

macdonald25 2010-10-18

打赏
举报

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

macdonald25 2010-10-18

打赏
举报

原谅偶。。偶是初级选手。

macdonald25 2010-10-18

打赏
举报

学习ing

Mr-Jee 2010-10-18

打赏
举报

没什么问题~~~！
很多朋友喜欢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()方法来添加标签。

macdonald25 2010-10-18