正解即结贴

tiantian1980 2010-09-14 07:01:07

有这样一段HTML代码



<div id="Form_20109141420941">

    <table id="ctl00_Table1" cellspacing="0" cellpadding="0" class="divForm_20109141420941" border="0" height="56" width="300" style="color:#0074F8;">

	<tr id="ctl00_1">

		<td align="right"></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><br>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_0" type="checkbox" name="ctl00$cbx0_0" /><label for="ctl00_cbx0_0">投诉</label></span>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_1" type="checkbox" name="ctl00$cbx0_1" /><label for="ctl00_cbx0_1">问题</label></span>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_2" type="checkbox" name="ctl00$cbx0_2" /><label for="ctl00_cbx0_2">建议</label></span>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_3" type="checkbox" name="ctl00$cbx0_3" /><label for="ctl00_cbx0_3">表扬</label></span></td>

	</tr><tr id="ctl00_2">

		<td align="right"><span id="ctl00_labPrompt1">您的反馈是关于哪方面的： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><select name="ctl00$ddl1" id="ctl00_ddl1" class="ClassForm_Form_20109141420941">

			<option value="==请选择==">==请选择==</option>

			<option value="关于网站">关于网站</option>

			<option value="关于公司">关于公司</option>

			<option value="关于商品">关于商品</option>

			<option value="关于服务">关于服务</option>

			<option value="关于员工">关于员工</option>

 

		</select></td>

	</tr><tr id="ctl00_3">

		<td align="right"><span id="ctl00_labPrompt2">请在下面留下您的反馈： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt2" type="text" id="ctl00_txt2" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

	</tr><tr id="ctl00_4">

		<td align="right"><span id="ctl00_labPrompt3">您的姓名： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt3" type="text" id="ctl00_txt3" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

	</tr><tr id="ctl00_5">

		<td align="right"><span id="ctl00_labPrompt4">您的E-mail： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt4" type="text" id="ctl00_txt4" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

	</tr><tr id="ctl00_6">

		<td align="right"><span id="ctl00_labPrompt5">您来自于： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt5" type="text" id="ctl00_txt5" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

	</tr><tr id="ctl00_7">

		<td align="right"><span id="ctl00_labPrompt6">您的电话： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt6" type="text" id="ctl00_txt6" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

	</tr>

</table>

        <div>

        <div style="width:100px; text-align:right; float:left;">验证码：</div>

        <div style="float:left; width:auto;"><img src="/WebSite/Security/CheckImage.aspx" style="cursor:pointer;" onclick="this.src=this.src+'?'"; /></div>

        <div style="float:left; width:auto; margin:2px;"><input type="Text" title='验证码' name='ValiKey' style="width:60px;float:left;" id="Form_20109141420941_0" class="ClassForm_20109141420941" rel="isMust" /></div>

        <div style="text-align:left; float:left;color:Red;width:auto;" id="Form_20109141420941_ErrDv0">*</div>

        </div><br />

    <div id="ButDivForm_20109141420941"><input type="button" id="ButSubForm_20109141420941" value="提交" onclick="return SubGuestBookForm_20109141420941();" /></div>

</div>

js:



var getElementsByClassName = function(searchClass,node,tag) {

    if(document.getElementsByClassName){

        return  document.getElementsByClassName(searchClass)

    }else{   

        node = node || document;

        tag = tag || '*';

        var returnElements = []

        var els =  (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag);

        //var i = els.length;

        var i = 0;

        searchClass = searchClass.replace(/\-/g, "\\-");

        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

        while(++i < els.length){

            if (pattern.test(els[i].className) ) {

                returnElements.push(els[i]);

            }

        }

        return returnElements;

    }

}



var o=getElementsByClassName('ClassForm_<%=DivName%>');

    for(var i=0;i<o.length;i++)

    {   

        var va=o[i].value;

        var Errid='<%=DivName%>_ErrDv'+o[i].id.replace('<%=DivName%>_','');

        if(va==""&&o[i].rel=='isMust')

        {



            var title=o[i].title;

            document.getElementById(Errid).innerHTML=' *'+title+'不能为空!';

            

            _re=false;

        }

        else 

        {

            //document.getElementById(Errid).innerHTML='';  

        } 

        if(o[i].name=="FormCtrRbn")

        {

            debugger

            //如果是radio,则找他第一个孩了标签,这里有问题,找得不是name=="FormCtrRbn"下的子控件

            var rbn=o[i].document.getElementsByTagName("input")[0];

            if(rbn.type=="radio")

            {

                //如果是选中则记录下值

                if(rbn.checked)

                {

                    param+='&'+rbn.name+'='+ rbn.value.split('_')[1];

                }

                else

                {

                    continue;

                }

            }



        }

        else if(o[i].name=="FormCtrCbx")

        {        

            //如果是check

            debugger

            var chk=o[i].document.getElementsByTagName("input")[0];

            if(chk.checked)

            {

                //如果是选中的记录下值,并累加

                if(chk.type=="checkbox")

                {

                    param+='&'+chk.name+'='+ chk.name.split('_')[1]; 

                }

                else

                {

                    continue;  

                }

            }

        }

        else

        {

            param+='&'+o[i].name.replace("FormCtr", "")+'='+o[i].value;    

        }

        

        

        //param+=o[i].name+':\\''+o[i].value+'\\''+_pre;

        

    }

...全文

152 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

diffmaker 2010-09-15

打赏
举报

好复杂，发现用jQuery做很简单，楼主参考下

<!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>无标题页</title>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        function checktest(){

           var selected=[];

           $('span[class^="ClassForm_Form_"] input[type="checkbox"]').each(function(){

                if(this.checked){

                    selected.push($(this).parent().text());

                }

           });

           alert(selected);

        }

    </script>

</head>

<body>

    <span name="FormCtrCbx" class="ClassForm_Form_20109141420941">

        <input id="ctl00_cbx0_0" type="checkbox" name="ctl00$cbx0_0" /><label for="ctl00_cbx0_0">投诉</label></span>

    <span name="FormCtrCbx" class="ClassForm_Form_20109141420941">

        <input id="ctl00_cbx0_1" type="checkbox" name="ctl00$cbx0_1" /><label for="ctl00_cbx0_1">问题</label></span>

    <span name="FormCtrCbx" class="ClassForm_Form_20109141420941">

        <input id="ctl00_cbx0_2" type="checkbox" name="ctl00$cbx0_2" /><label for="ctl00_cbx0_2">建议</label></span>

    <span name="FormCtrCbx" class="ClassForm_Form_20109141420941">

        <input id="ctl00_cbx0_3" type="checkbox" name="ctl00$cbx0_3" /><label for="ctl00_cbx0_3">表扬</label></span>

    <div id="ButDivForm_20109141420941">

        <input type="button" id="ButSubForm_20109141420941" value="提交" onclick="checktest();" /></div>

</body>

</html>

hoojo 2010-09-15

打赏
举报

[Quote=引用 7 楼 shenzhennba 的回复:]

引用 4 楼 brainwkernighan 的回复:

3喽：可以，我经常这么用，应该在载入jsp编译的时候就会被替换了吧？如果把js作为外部文件引用js里面就不能这么用了。

LZ，按你的意思，估计是想找指定样式名称的元素（容器）下面指定的元素（目标元素），选中取值。。。
这个有个问题，指定样式名称的容器可以是一个元素，也可以其下面有很多的别的元素，这个包含的情况比较复杂。。。还是……
[/Quote]
+

shenzhenNBA 2010-09-15

打赏
举报

上面仅是获取 type 为 checkbox 或者 radio 的 input 情况

shenzhenNBA 2010-09-15

打赏
举报

[Quote=引用 4 楼 brainwkernighan 的回复:]

3喽：可以，我经常这么用，应该在载入jsp编译的时候就会被替换了吧？如果把js作为外部文件引用js里面就不能这么用了。
[/Quote]
LZ，按你的意思，估计是想找指定样式名称的元素（容器）下面指定的元素（目标元素），选中取值。。。
这个有个问题，指定样式名称的容器可以是一个元素，也可以其下面有很多的别的元素，这个包含的情况比较复杂。。。还是简单点，直接找指定样式名称的某个元素集，重写如下，测试见后面的 test get parameter 连接



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<style type="text/css">

*{font-family:verdana; font-size:12px;}

.div{border:1px solid red; padding:2px;}

</style>

<script type="text/javascript">

function $(id){

return "string" == typeof(id) ? document.getElementById(id) : id ;

}



function trim(str){

return str.replace(/^\s*|\s*$/g,"");

}

function getElementsByClassName(tagName,className){

var tn=trim(tagName);

var cn=trim(className.toLowerCase());

if(cn==""||tn=="") return;

var nList=document.getElementsByTagName(tn);

var reEls=[],xtype="";

for(var i=0;i<nList.length;i++){

	xtype=nList[i].type.toLowerCase();

	if(xtype=="checkbox"||xtype=="radio") 

		reEls.push(nList[i]);  	

	}

return reEls;

}



function getParam(tagName,className){

var xList=getElementsByClassName(tagName,className);

var reStr="";

for(var i=0;i<xList.length;i++){

	if(xList[i].checked)

		reStr+="&"+xList[i].name+"="+xList[i].name.split("_")[1];		

	}

	if(reStr=="")

	alert("选中参数为空");	

	else

	alert("选中参数:\n"+reStr);	

}

</script>

<body>

<div id="Form_20109141420941">

    <table id="ctl00_Table1" cellspacing="0" cellpadding="0" class="divForm_20109141420941" border="0" height="56" width="300" style="color:#0074F8;">

    <tr id="ctl00_1">

        <td align="right"></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><br>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_0" type="checkbox" name="ctl00$cbx0_0" /><label for="ctl00_cbx0_0">投诉</label></span>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_1" type="checkbox" name="ctl00$cbx0_1" /><label for="ctl00_cbx0_1">问题</label></span>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_2" type="checkbox" name="ctl00$cbx0_2" /><label for="ctl00_cbx0_2">建议</label></span>

<span name="FormCtrCbx" class="ClassForm_Form_20109141420941"><input id="ctl00_cbx0_3" type="checkbox" name="ctl00$cbx0_3" /><label for="ctl00_cbx0_3">表扬</label></span></td>

    </tr><tr id="ctl00_2">

        <td align="right"><span id="ctl00_labPrompt1">您的反馈是关于哪方面的： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><select name="ctl00$ddl1" id="ctl00_ddl1" class="ClassForm_Form_20109141420941">

            <option value="==请选择==">==请选择==</option>

            <option value="关于网站">关于网站</option>

            <option value="关于公司">关于公司</option>

            <option value="关于商品">关于商品</option>

            <option value="关于服务">关于服务</option>

            <option value="关于员工">关于员工</option> 

        </select></td>

    </tr><tr id="ctl00_3">

        <td align="right"><span id="ctl00_labPrompt2">请在下面留下您的反馈： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt2" type="text" id="ctl00_txt2" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

    </tr><tr id="ctl00_4">

        <td align="right"><span id="ctl00_labPrompt3">您的姓名： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt3" type="text" id="ctl00_txt3" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

    </tr><tr id="ctl00_5">

        <td align="right"><span id="ctl00_labPrompt4">您的E-mail： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt4" type="text" id="ctl00_txt4" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

    </tr><tr id="ctl00_6">

        <td align="right"><span id="ctl00_labPrompt5">您来自于： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt5" type="text" id="ctl00_txt5" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

    </tr><tr id="ctl00_7">

        <td align="right"><span id="ctl00_labPrompt6">您的电话： </span></td><td style="border-width:1px;border-color:#0072D8;border-style:solid;"><input name="ctl00$txt6" type="text" id="ctl00_txt6" class="ClassForm_Form_20109141420941" style="border-width:1px;border-color:#0072D8;border-style:solid;" /></td>

    </tr>

</table>

        <div>

        <div style="width:100px; text-align:right; float:left;">验证码：</div>

        <div style="float:left; width:auto;"><img src="/WebSite/Security/CheckImage.aspx" style="cursor:pointer;" onclick="this.src=this.src+'?'"; /></div>

        <div style="float:left; width:auto; margin:2px;"><input type="Text" title='验证码' name='ValiKey' style="width:60px;float:left;" id="Form_20109141420941_0" class="ClassForm_20109141420941" rel="isMust" /></div>

        <div style="text-align:left; float:left;color:Red;width:auto;" id="Form_20109141420941_ErrDv0">*</div>

        </div><br />

    <div id="ButDivForm_20109141420941"><input type="button" id="ButSubForm_20109141420941" value="提交" onclick="return SubGuestBookForm_20109141420941();" /></div>

</div>

<p>

<a href="javascript:getParam('input','ClassForm_Form_20109141420941');">Test get parameter</a>

</p>

</body>

</html>

gs8716 2010-09-15

打赏
举报

diffmaker 2010-09-15

打赏
举报

从命名规则看，貌似是.net的窗体代码吧

brainwkernighan 2010-09-14

打赏
举报

3喽：可以，我经常这么用，应该在载入jsp编译的时候就会被替换了吧？如果把js作为外部文件引用js里面就不能这么用了。

shenzhenNBA 2010-09-14

打赏
举报

重写，查找指定容器样式名称下的指定元素



function getElementByContainerClassName(ContainerClassName,findTag){

var ccn=trim(ContainerClassName.toLowerCase());

var ft=trim(findTag);

if(ccn==""||ft=="") return;

var oList=document.getElementsByTagName(*);

var nList,i=0,j=0;

var reEls=[];

for(i;i<oList.length;i++){

	if(oList[i].className.toLowerCase()==ccn){

		var nList=oList[i].getElementsByTagName(ft);

		for(j;j<nList.length;j++){

			if(nList.type.toLowerCase()=="checkbox") reEls.push(nList[i]);

			}

		}

	}

}

下班，明天在看了.... :),
你直接在JS下写<%....%> 能运行吗？。。。

zhangshaolongjj 2010-09-14

打赏
举报

比如我找到了class='ClassForm_<%=DivName%>'这个对象，假设是obj
那么
var cs = obj.getElementsByTagName("input");
var arr = [];
for(var i=0;i<cs.length;i++){
if(cs[i].type.toLowerCase() == "checkbox" && cs[i].checked){
arr.push(cs[i]);
}
return arr;
写了方法体

tiantian1980 2010-09-14