JS脚本的基础应用
1、<td id=“aa”><span id="bb">Shang</span></td>改变span的值，为“Shang0109”
function ChangeSpanText()
{
var aa=document.getElementById('aa').getElementsByTagName("span")[0].innerText;
//getElementsByTagName 获取的是数组,此为获取 <td>中所有的<span>
var xh='0109';
if(aa.indexOf(aa)!=-1)//先判断是否已包含"0109"
{
document.getElementById('aa').getElementsByTagName("span")[0].innerText+="0109";
}
}
2、CheckBox被选中，则span显示，否则不显示（常用作关联功能的使用）
<tr>
<td><asp:CheckBox ID="aa" runat="server" Checked="false" onclick="CBChecked()"/></td>
<td><span id="bb"><asp:TextBox ID="cc" runat="server" ></asp:TextBox></span></td>
</tr>
function CBChecked()
{
if(document.getElementById('aa').checked==false)//未被选中
{
document.getElementById('bb').style.display='none';//不显示
}
else
{
document.getElementById('bb').style.display='';//显示
}
}
3、通过一个下拉列表选择种类，一个文本框填写数量，一个“添加”的按钮，并在ListBox中显示明细记录，以供总提交。
页面的html代码：
View Code
<tr>
<td class='td_table_1' >
<span>选择设备</span>
</td>
<td class='td_table_2' >
<asp:DropDownList ID="ddlDevList" runat="server" class="input_select"></asp:DropDownList>
</td>
<td class='td_table_1' ><span>数量（个）</span></td>
<td class='td_table_2'>
<asp:TextBox ID="txtDevNum" runat="server" CssClass="input_150"></asp:TextBox>
<input id="btnAdd" type="button" value="添 加" class="unnamed_anliu" onclick="return btnAdd_onclick()" />
</td>
</tr>
<tr>
<td class='td_table_1' >
<span>添加明细</span>
</td>
<td class='td_table_2' colspan='3'>
<asp:ListBox ID="ltbDevDetials" runat="server" Width="400px" Height="100px">
</asp:ListBox>
</td>
</tr>
参考JS代码：
View Code
//添加入库设备信息到ListBox 中，并初始化数量 空； function btnAdd_onclick() { var ddl=document.getElementById('ddlDevList'); var index=ddl.selectedIndex; var devName=ddl.options[index].text;//设备名称 //alert(DevName); //var dd=ddl.options[index].value; //alert(dd);//同上 两个都可以 var devNum=document.getElementById('txtDevNum').value;//设备数量 if(Number(devNum)==0|| isNaN(devNum)==true)//如果数量为空，或者输入的非数字，则提示错误！（包括为空的情况） { alert("请正确输入设备数量！"); document.getElementById('txtDevNum').value=""; return; } //将设备名称和数量添加 到 ListBox当中，已存在的设备 则改变其数量 var ltbDevDetials=document.getElementById('ltbDevDetials'); var ltbCount=ltbDevDetials.options.length;//ListBox 元素的长度 if(ltbCount<=0) { //添加一个ListBox元素 var option=document.createElement("option"); option.value=devNum; option.text=devName +" : "+option.value+" 个"; ltbDevDetials.add(option); document.getElementById('txtDevNum').value=""; return; } else //遍历ListBox中的每一个元素，并与新添加的元素比较，如果该元素设备名已存在，则两者数量相加，否则添加新元素 { var i,j; for(i=0; i<ltbDevDetials.options.length;i++) { j=ltbDevDetials.options[i].text.indexOf(devName);//判断是否添加过该编号的设备 if(Number(j)==0)//ListBox已添加该设备 { var num=Number(ltbDevDetials.options[i].value)+Number(devNum); ltbDevDetials.options[i].value=num;//要更新该条设备的数据 if(num<=0) { ltbDevDetials.remove(i); document.getElementById('txtDevNum').value=""; return; } ltbDevDetials.options[i].text=devName+" : "+num+" 个"; document.getElementById('txtDevNum').value=""; return; } } } if(ltbDevDetials.options.length==i)//说明新添加的设备之前没有被添加过 { //添加一个ListBox元素 var option=document.createElement("option"); option.value=devNum; option.text=devName +" : "+option.value+" 个"; ltbDevDetials.add(option); document.getElementById('txtDevNum').value=""; return; } }
另一个思路，解决：将添加部分（上图所示）更换为一个<iframe></iframe>的框架可以绑定一个新的页面，在新“添加”的时候，可以通过提交Session，再由当前页面从Session中获取后实现“总提交”到数据库中。
4、通过链接跳转到新页面，并控制新页面的属性，使新页面处于屏幕中间：
<a href="#" onclick="JumpOutWeb(<%# DataBinder.Eval(Container.DataItem, "id", null) %>)">查看明细</a>
绑定了该条记录的id；
function JumpOutWeb(id)//屏幕中间弹出一个web窗体 {
var left=Math.round((window.screen.width-600)/2);
var top=Math.round((window.screen.height-200)/2);
window.open('devDetialsLook.aspx?id='+id, 'newwindow', 'height=200, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,target=_blank'+',left='+left+',top='+top)
}
Window.Open跳转新页面命令。新页面属性（ 'devDetialsLook.aspx?id='+id：是要弹出的页面，也可是html页面，newWindow：新页面的名字，可使用“”代替，
height：页面高度，width：页面宽度，toolbar：是否显示工具栏，menubar：是否显示：菜单栏， scrollbars：是否显示滚动条，resizable：是否允许改变窗口的大小，location：是否显示地址栏，status：是否显示状态栏内的信息，
left：窗口距离屏幕左边的像素，top窗口距离屏幕顶端的像素）
window.location.href('Default.aspx');//替换当前页面，跳转到指定页面，同时页面也可以添加参数如：“Default.aspx?id=1”
5、判断输入文本框的值是否是数字，不是则提示。
function IfNumber()
{
var tel=document.getElementById("txtTel");
if(isNaN(tel.value)==true)
{
alert("请输入数字！");
tel.focus();//聚焦到该文本框中
return false;
}
return true;
}
<asp:TextBox ID="txtTel" runat="server" autocomplete="off" onblur="IfNumber();"></asp:TextBox>
autocomplete="off"：清除文本框中的痕迹
6、页面中提示窗体的实现
public class Utility
{
#region 脚本相关
/// <summary>
/// 向页面中增加onload事件方法
/// attachEvent,可以在onload中绑定多个，
/// </summary>
/// <param name="key"></param>
/// <param name="fun"></param>
public static void JSAttachEventOnload(string key, string fun)
{
Page page = HttpContext.Current.Handler as Page;
page.ClientScript.RegisterStartupScript(page.GetType(), key, "if
(window.attachEvent)window.attachEvent(\"onload\", function() { " + fun + " });
else window.addEventListener(\"load\", function() { " + fun + " }, true);", true);
}
#endregion
}
该方法在.NET中直接调用就可以了
Utility.JSAttachEventOnload("key","fun");//key自定义//fun 可以使方法名，也可以使js代
码如：Utility.JSAttachEventOnload("submitFail","alert('提交失败！')");
Utility.JSAttachEventOnload("aaa","a()");//a()为js方法
window.attachEvent方法是IE5.0以后提供的方法，该方法可以一个事件，绑定多个处理过程。
Mozilla/Firefox浏览器不支持该方法，而是使用addEventListener,事件也不以“on”开头，并
且addEventListener有三个参数。一般情况下，会同时使用这两个方法，以适用于不同的浏览器
。
if(document.all){window.attachEvent('onload',事件名);}
else{window.addEventListener('load',事件名,true/false);}
7、Web关闭当前页面，一般情况用于关闭弹出的web窗体。
（1）：ClientScript.RegisterStartupScript(Page.GetType(), "", "<script language=javascript>window.opener=null;window.close();</script>");
（2）：ClientScript.RegisterStartupScript(Page.GetType(), "", "<script language=javascript>window.opener=null;window.open('','_self');window.close();</script>");
将window.opener=null 改为 window.opener.document.location.reload(); 页面在关闭之前会刷新主页面
（3）：关闭当前页面弹出的提示窗口，并在关闭后刷新页面
Response.write "<script language='javascript'>"& chr(13) &"alert('您已经成功登陆');opener.location.reload();window.close();"&"</script>"
8、删除链接加提示框。
<script type="text/javascript" language="javascript">
function DelWindowLink(code)
{
if(window.confirm("确定要删除吗？"))
{
window.location="DevDelete.aspx?Code="+code.toString();
}
}
</script>
<a href="#" onclick="DelWindowLink(<%# DataBinder.Eval(Container.DataItem,"Code" ,null) %>)" >删 除</a>
该链接中的code是Repeater中绑定的code，此处可以自行使用。
9、实现全选的功能
function SelectAll()//全选
{
var checkbox = document.getElementsByTagName("input");
if (checkbox[0].checked == true) {
for (var i = 0; i < checkbox.length; i++){
checkbox[i].checked = false;
if(checkbox[i].type=="text")
{
checkbox[i].style.display='none';
}
}
}
else {
for (var i = 0; i < checkbox.length; i++)
{
checkbox[i].checked = true;
if(checkbox[i].type=="text")
{
checkbox[i].style.display='';
}
}
}
}
10：window.attachEvent
通过监听加载js方法
<script type="text/javascript language="javascript">
function initHMenus()
{
alert("加载成功!");
}
</script>
后台：
/// <summary>
/// 向页面中增加onload事件方法
/// attachEvent,可以在onload中绑定多个
public static void JSAttachEventOnload(string key, string fun)
{ //(System.Web.UI)Page
Page page = HttpContext.Current.Handler as Page;
page.ClientScript.RegisterStartupScript(page.GetType(), key, "window.attachEvent('onload',initHMenus);",true);
}
11、JS获取地址中的参数
function RedirctNewPage()//获取地址当前页面地址栏中的参数，并附加到新地址实现页面跳转 {
var gid='';
var url=window.location.search;
if(url.indexOf("?")!=-1)
{
var str=url.substr(1);
strs = str.split("&");
for(i=0;i<strs.length;i++)
{
if([strs[i].split("=")[0]]=='gid')
{
gid=unescape(strs[i].split("=")[1]);break;
}
}
}
window.location.href="TerminalExtAdd.aspx?gid="+gid.toString();
}
12、获取表中某行某列的值
var tbID = document.getElementById('tbID');
tbID.rows(1).cells(2).innerHTML//获取第二行第三列的值
tbID.deleteRow(1);//删除第二行
13、执行操作点击确定提示框，刷新主页面并关闭当前页面
<script src="../resources/script/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
//删除知识库
function DelConfirm(kid) {
Confirm("确定要删除该条数据吗？", function() { AjaxDel(kid) });
}
function AjaxDel(kid) {
$.ajax({
type: "get",
url: 'Del.aspx?kid=' + kid, //后台处理程序
dataType: 'html', //接受数据格式
data: {}, //要传递的数据
success: function(msg) {
//执行删除操作后，刷新父页面 列表页面关闭当前页面
window.opener.document.location.reload();
window.close();//关闭当前页面
},
error: function() {
alert("error");
}
// function(XMLHttpRequest, textStatus, errorThrown) {
// alert(XMLHttpRequest.status);
// alert(XMLHttpRequest.readyState);
// alert(textStatus);
// }
}
);
}
</script>
14、js调用后台的事件
在上面的图片中，执行添加，修改，删除等操作后，并对列表页面进行更新，通常情况下，我们执行服务器控件的事件后，页面会被重新加载，如果使用js调用后台的事件，可实现不重新加载页面的效果。
<script type="text/javascript" language="javascript">
function test() {
document.getElementById("btnTest0").click();
}
</script>
<asp:Button ID="btnTest0" runat="server" Text="删 除" class="unnamed_anliu" OnClick="btnTest_Click" />
<input type="button" value="执行后台事件" id="btnTest1" onclick="test();"/>
后台：
protected void btnTest_Click(object obj, EventArgs e)
{
JSAttachEventOnload("suc","alert('测试成功，该方法成功执行了后台的事件！');");
}
public static void JSAttachEventOnload(string key, string fun)
{
Page page = HttpContext.Current.Handler as Page;
page.ClientScript.RegisterStartupScript(page.GetType(), key, "if (window.attachEvent)window.attachEvent(\"onload\", function() { " + fun + " }); else window.addEventListener(\"load\", function() { " + fun + " }, true);", true);
}
15、刷新父页面，一般用于子页面执行过操作后，刷新父列表页面，更新数据列表
window.opener.document.location.reload();
window.close();//关闭当前页面
16、同级iframe直接的方法调用
window.parent.document.frames["frm_top"].ccc();
表示当前iframe调用同级的id为“frm_top”的ccc（）方法
