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" οnclick="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代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<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" οnclick="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代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
//添加入库设备信息到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="#" οnclick="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" οnblur="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="#" οnclick="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" οnclick="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()方法