页面常用部分

HTML+XHTML+CSS+JavaScript+DOM+AJAX语法及范例实用辞典( 张亚飞 (作者))


JSP中文乱码:

--页面自身编码pageEncoding以及IE访问用编码<%@ page contentType="text/html;charset=GBK" pageEncoding="GBK"%>
--数据传到后台前设子字符编码<%request.setCharacterEncoding("GBK");%>


1.单选按钮
<input type="radio" name="rdo" value="1">1
<input type="radio" name="rdo" value="2">2
<input type="radio" name="rdo" value="5">3
<input type="button" οnclick="dispRadio();" style="width: 50px;" value="clicku">

<script type="text/javascript">
/*
Radio
*/
function dispRadio(){

var item_v = document.getElementsByName("rdo"); :wink:
for(var i =0;i<item_v.length;i++){
if(item_v[i].checked){
alert(item_v[i].value);
}
}
}
</script>
2.复选框和下拉列表
Select:<select name="slt">
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
</select><br>
SelectAll:<input type="checkbox" name="item_all" οnclick="checkAll(this);">
<input type="checkbox" name="item_v">1
<input type="checkbox" name="item_v">2
<input type="checkbox" name="item_v">3
<br>
<input type="text" name="t">
<input type="button" οnclick="dispValue();" style="width: 50px;" value="clickme">


<script type="text/javascript">
/*
CheckAll/or False
*/
function checkAll(obj){
var item_v = document.getElementsByName("item_v"); :wink:
for(var i =0;i<item_v.length;i++){
item_v[i].checked=obj.checked;
}
}
/*
Select
*/

function dispValue(){
var obj = document.getElementById("slt");
alert(obj.options[obj.selectedIndex].value);//获取1 :wink:
for(var i=0;i< obj.length;i++){
if(obj[i].selected==true){
alert(obj[i].innerText);//1+ :wink:
alert(obj[i].value);//1 :wink:
document.getElementById("t").value =obj[i].value;
}
}
</script>

------------------------------------------------------------
JS动态：

[u]表格:[/u]
<table border="0" align="center" cellpadding="0" cellspacing="0"
class="tableSty3" >
<tbody id="tb">
<tr><td>已有内容</td></tr>
<tr><td>已有内容</td></tr>
<!--.....add -->
</tbody>
</table>


js:

var tb = document.getElementById("tb");
if(tb.rows.length>2){
tb.deleteRow(2);//先删除增加的第三行 再增加第三行
}

var newtr = tb.insertRow();
newtr.id = "addTr";
var newtd1 = newtr.insertCell();
newtd1.className ="tableSty3-td";
newtd1.width="18%";
newtd1.innerHTML = "当前选择的查询名称";

var newtd2 = newtr.insertCell();
newtd2.width= "10%";
newtd2.innerHTML = "<input type='text' readonly='readonly' value="+rtnQueryId[1]+">";
var newtd3 = newtr.insertCell();
newtd3.colSpan="2";

[u]ajax请求验证：[/u]
//封装XMLHTTP
function postform(sJSPFile,sPostData) {
//sJSPFile 为调用的JSP文件名串包括查询参数串
//sSend为SEND的XML字符串
//函数返回HTTP的响应结果
var xmlhttp;
var sRet="";
try{
if(navigator.appName.indexOf("Microsoft")!=-1){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.Open("POST", sJSPFile,false);
xmlhttp.setRequestHeader("Content-Type","text/xml");
xmlhttp.setRequestHeader("charset","GBK");
xmlhttp.Send(sPostData);
}
else{
xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", sJSPFile,false);
xmlhttp.send(sPostData);

}

sRet=xmlhttp.responseText;
//alert(sRet);
}

catch (exception){
alert("服务器忙!");
}
return sRet;
}


[u]selection动态增加option：[/u]

<td class="tableSty3-td" width="15%">
XXXX
</td>
<td width="10%">
<html:select property="dto.relInfoSceneId" name="pubInfoPrptyRelForm" οnchange="slt(this.options[this.selectedIndex].value)" style="width:120px">
<html:option value=""></html:option>
<html:optionsCollection name="pubInfoPrptyRelForm" property="sceneList" label="name" value="id"/>
</html:select>
<font color="#D11B00">*</font>
</td>
<td class="tableSty3-td" width="15%">
XXXXXX
</td>
<td width="10%">
<html:select name="pubInfoPrptyRelForm" property="dto.relPrptyId" style="width:120px" >
<logic:notEmpty name="pubInfoPrptyRelForm" property="dto.relPrptyId">
<html:optionsCollection name="pubInfoPrptyRelForm" property="prptyRelList" label="name" value="id"/>
</logic:notEmpty>
</html:select>

<font color="#D11B00">*</font>
</td>

function slt(value){

if(value != '' ){
var obj = document.all('dto.relPrptyId');
obj.options.length=0;//clear options

var url = "pubInfoPrptyRelAction.do?method=getPrptyList&sceneId="+value;
var rtnValue = postform(url,null);
if(rtnValue != null ){
var arr = rtnValue.split('\r\n');
for(var i = 0;i<arr.length-1;i++){//arr.length-1 最后一行有'\r\n'
var arr1 = arr[i].split(',');
var op =document.createElement("option");
op.value=arr1[0]; //id
op.text=arr1[1];//name
obj.options.add(op); //add options

}

if(obj.options.length >0){
obj.options[0].selected ='true';}
}


}else{
var obj = document.all('dto.relPrptyId');
obj.options.length=0;//clear options
}

}


下面这样加载是错误的：不能用html:optionsCollection
option:
//newtd2.innerHTML= "<html:select name='pubInfoPrptyFrom' property='dto.dispSceneId' style='width:120px'> <html:optionsCollection name='pubInfoPrptyFrom' property='disRelScene' label='name' value='id'></html:optionsCollection> <font color='#D11B00'>*</font></html:select>";

//newtd4.innerHTML="<html:select name='pubInfoPrptyFrom' property='dto.saveSceneId'style='width:120px'> <html:optionsCollection name='pubInfoPrptyFrom' property='saveRelScene' label="name" value='id'></html:optionsCollection> <font color='#D11B00'>*</font></html:select>";


[u]节点属性parentNode:[/u]
This is my JSP page.
<br>
<table id="tb">
<tbody id="tbd">
<tr id="tr1">

<td>
<a οnclick="add(this)"><u>Click</u></a>
</td>
</tr>
<tr>
<td>

111
</td>
</tr>
<tr>
<td>

222
</td>
</tr>
</tbody>
</table>
<div id="div1">
<div id="div11"><a οnclick="adddiv(this)"><u>Click</u></a></div>
<div id="div22">div11</div>
<div id="div33">div22</div>
</div>
<script type="text/javascript">
function add(obj){
alert(obj.parentNode.parentNode.id);
alert(obj.parentNode.parentNode.parentNode.id);//
alert(obj.parentNode.parentNode.parentNode.parentNode.id);//tbody id
alert(obj.parentNode.parentNode.rowIndex);//current rowIndex
var tbd = document.getElementById('tbd');
tbd.deleteRow(obj.parentNode.parentNode.rowIndex+1);
var newtr = tbd.insertRow(tbd.childNodes.length);
var newtd = newtr.insertCell();
newtd.innerHTML="THIS IS A NEW TR";

var newtr2 = document.createElement("tr");
var newtd2 = document.createElement("td");
newtd2.innerHTML="THIS IS ANOTHER NEW TR";
newtr2.appendChild(newtd2);
tbd.appendChild(newtr2);

}

function adddiv(obj){
alert(obj.parentNode.parentNode.id);
var div1 = document.getElementById('div1');
var newdiv = document.createElement('div');
newdiv.innerHTML="THIS IS A NEW DIV";
div1.appendChild(newdiv);
//under same result
alert(div1.children['0'].innerHTML);//
alert(div1.childNodes['0'].innerHTML);//
alert(div1.childNodes.length);//4


}
</script>