deleteCell方法详解,Js实现双击鼠标自动滚动屏幕的示例代码

insertRow() 方法

如下所示:

在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器。如果用户选择了离开,那么onunload事件自然会触发;但若用户选择了取消,又该如何检测呢?

定义和用法

复制代码 代码如下:

我们假定一个页面离开取消事件,叫做onunloadcancel。显然,这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程:

insertRow() 方法用于在表格中的指定位置插入一个新行。

<html>
<head>

复制代码 代码如下:

语法

<script language=”javascript” type=”text/javascript”>
//双击鼠标滚动屏幕的代码
var currentpos,timer;
function initialize()
{
  timer=setInterval(“scrollwindow()”,30);
}
function sc()
{
  clearInterval(timer);
}
function scrollwindow()
{
  currentpos=document.body.scrollTop;
  window.scroll(0,++currentpos);
  if(currentpos !=document.body.scrollTop)
  {
     sc();
  }
}
document.onmousedown=sc; //停止
document.ondblclick=initialize; //开始
</script>

window.onbeforeunload = function()
{
    return “真的离开?”;
}

tableObject.insertRow(index)

</head>
<body>
<%
  for i=1 to 100
%>
<p>双击屏幕滚动的Js代码</p>
<%
  next
%>
</body>
</html>

当用户准备离开页面(比如按下关闭按钮,或者刷新页面等等),onbeforeunload事件触发。我们的脚本无法在这个事件里决定是否阻止页面的关闭,唯一能做到的只有返回一个字符串,这个字符串仅作为说明文字出现在关闭选择对话框里,用户可以选择关闭,或者不关闭。但究竟选择哪个,我们无从得知。

返回值

您可能感兴趣的文章:

  • 设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
  • JS实现鼠标单击与双击事件共存
  • js jq
    单击和双击区分示例介绍
  • js修改table中Td的值(定义td的双击事件)
  • javascript 单选按钮 单击选中
    双击取消选择实现代码
  • jquery.jstree
    增加节点的双击事件代码
  • javascript
    双击文本框编辑功能代码
  • js添加删除行和双击变文本框的脚本
  • JS实现双击内容变为可编辑状态

然而仔细分析下这个问题,其实不然。
如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。

返回一个 TableRow,表示新插入的行。

复制代码 代码如下:

说明

<script language=”JavaScript”>
window.onbeforeunload = function()
{
    setTimeout(onunloadcancel, 10);
    return “真的离开?”;
}
window.onunloadcancel = function()
{
    alert(“取消离开”);
}
</script>

该方法创建一个新的 TableRow 对象,表示一个新的 <tr>
标记,并把它插入表中的指定位置。

我们使用setTimeout,延时10ms执行onunloadcancel。如果页面真关闭了,定时器当然都销毁;反之继续。但在测试中,发现FireFox有个两个BUG:

新行将被插入 index 所在行之前。若 index
等于表中的行数,则新行将被附加到表的末尾。

有时按下关闭按钮,也会执行onunloadcancel,并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死,这说明onunloadcancel确实是执行了,只是销毁了界面,但并没有暂停脚本的运行。
如果是通过刷新页面的方式离开,仅执行一次onbeforeunload,但点击X按钮关闭页面,会执行两次onbeforeunload。因此我们还需在完善下,以便兼容FF。

如果表是空的,则新行将被插入到一个新的 <tbody>
段,该段自身会被插入表中。

复制代码 代码如下:

抛出

<script language=”JavaScript”>
var _t;
window.onbeforeunload = function()
{
    setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
    return “真的离开?”;
}
window.onunloadcancel = function()
{
    clearTimeout(_t);
    alert(“取消离开”);
}
</script>

若参数 index 小于 0 或大于等于表中的行数,该方法将抛出代码为
INDEX_SIZE_ERR 的 DOMException 异常。

这里使用了一种我也说不出原因的办法,应该算是hack,解决了FF下的bug。

例子

您可能感兴趣的文章:

  • layer.confirm取消按钮绑定事件的方法
  • layer弹窗插件操作方法详解
  • js简单的弹出框有关闭按钮
  • layer.open
    按钮的点击事件关闭方法

复制代码 代码如下:

<html>
<head>
<script type=”text/javascript”>
function insRow()
  {
  document.getElementById(‘myTable’).insertRow(0)
  }
</script>
</head>

<body>
<table id=”myTable” border=”1″>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type=”button” onclick=”insRow()”
value=”Insert new row”>

</body>
</html>

deleteCell()

定义和用法

deleteCell() 方法用于删除表格行中的单元格(<td> 元素)。

语法

tablerowObject.deleteCell(index)

说明

参数 index 是要删除的表元在行中的位置。

该方法将删除表行中指定位置的表元。

发表评论

电子邮件地址不会被公开。 必填项已用*标注