页面常用部分

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" onclick="dispRadio();" style="width: 50px;" value="clicku">

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

var item_v  = document.getElementsByName("rdo");
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" onclick="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" onclick="dispValue();" style="width: 50px;" value="clickme">


<script type="text/javascript">
/*
CheckAll/or False
*/
function checkAll(obj){
var item_v  = document.getElementsByName("item_v");
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
for(var i=0;i< obj.length;i++){
if(obj[i].selected==true){
  alert(obj[i].innerText);//1+
  alert(obj[i].value);//1
  document.getElementById("t").value =obj[i].value;
}
}
</script>

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

表格:
<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";

ajax请求验证：
//封装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;
}


selection动态增加option：

<td class="tableSty3-td" width="15%">
XXXX
</td>
<td width="10%">
<html:select property="dto.relInfoSceneId" name="pubInfoPrptyRelForm" onchange="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>";


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

<td>
<a onclick="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 onclick="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>