<html>
<head>
<title>测试页面</title>
<style>
.list {
border-top:1 solid #8A2BE2;
border-left:1 solid #8A2BE2;
border-right:1 solid #8A2BE2;
}
.list td {
border-bottom: 1 solid #8A2BE2;
}
</style>
<script>
function $(el) {
return document.getElementById(el);
}
function showWin(param) {
window.showModalDialog("dailog.html", param, "dialogWidth:" +param.width +"px;dialogHeight:"+param.height+"px;center:yes;help:no;scroll:no;status:no;resizable:no");
}
function TB(tbid) {
this.tb = typeof(tbid) == "string"? $(tbid): tbid;
this.getValue = function(rowIndex, cellIndex){
var trs = this.tb.rows[rowIndex];
var _td = trs.cells[cellIndex];
return _td.innerText;
}
this.setValue = function(rowIndex, cellIndex, value) {
var _tr = this.tb.rows[rowIndex];
var _td = _tr.cells[cellIndex];
_td.innerText = value;
}
/********获取行索引********/
this.findRowIndex = function(eventSrc) {
var _tr = eventSrc; //eventSrc事件源,必须在TD里获事件源是TD或TR本身
while(_tr.tagName != "TR") {
_tr = _tr.parentNode;
}
var trs = this.tb.rows;
for(var i = 0; i < trs.length; i++){
if(_tr == trs[i]) return i;
}
}
}
function edit() {
var tb = new TB("data");
rIndex = tb.findRowIndex(event.srcElement);
$("updateRowIndex").value = rIndex;
$("userName").value = tb.getValue(rIndex, 1); //获得姓名
$("sex").value = tb.getValue(rIndex, 2); //获得性别
$("age").value = tb.getValue(rIndex, 3); //获得年龄
showWin({title:"修改用户信息", width:390, height:230, _div:"openWin",parent:window});
}
function saveAndUpdateView(){
var updateRowIndex = $("updateRowIndex").value;
var tb = new TB($f("data")); //$f()在dailog.html定义,获到的table是父窗口中的table
tb.setValue(updateRowIndex, 1, $("userName").value);
tb.setValue(updateRowIndex, 2, $("sex").value);
tb.setValue(updateRowIndex, 3, $("age").value);
close();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<p style="margin-top:60px">
<center>
<table id="data" class="list" width="460px">
<tr>
<td>编号</td>
<td>用户名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>李永胜</td>
<td>男</td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
<tr>
<td>2</td>
<td>林兄</td>
<td>男</td>
<td>27</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
<tr>
<td>3</td>
<td>叶兄</td>
<td>男</td>
<td>23</td>
<td><span style="background:#FAEBD7;cursor:hand" onclick="edit();"> 修改 </span></td>
</tr>
</table>
</center>
</p>
<!---弹出窗口显示的内容---->
<div id="openWin" style="display:none;">
<form>
<fieldSet>
<legend>修改用户</legend>
<table>
<tr>
<td>用户名</td><td><input type="text" id="userName"/></td>
</tr>
<tr>
<td>性别</td><td><input type="text" id="sex"/></td>
</tr>
<tr>
<td>年龄</td><td><input type="text" id="age"/></td>
</tr>
</table>
</fieldSet>
<input type="hidden" id="updateRowIndex"/>
</form>
<span style="background:#FAEBD7;cursor:hand" onclick="saveAndUpdateView();"> 修改 </span>
</div>
</body>
</html>
分享到：
相关推荐
在`layui.use()`回调函数中，编写点击按钮时弹出表单的逻辑。这通常包括创建表单结构、监听按钮事件以及处理表单提交： ```javascript layui.use(['form', 'layer'], function () { var form = layui.form, ...
在IT行业中，弹出窗口是一种常见的用户界面设计元素，它用于显示额外的信息或者与用户进行交互。本资料主要探讨弹出窗口的相关知识点，包括其功能、类型、实现方式以及优化策略。 1. 弹出窗口的功能： 弹出窗口...
在本文中，我们将深入探讨基于jQuery的弹出登录表单窗口插件的实现与应用。这个插件的独特之处在于它将登录表单设计为一个弹出层窗口，从而提供了更友好的用户体验，使得用户无需离开当前页面即可完成登录操作。 ...
在IT行业中，自定义弹出窗口是一种常见的交互设计技术，特别是在需要用户输入信息或执行特定操作但不希望离开当前页面的情况下。自定义弹出窗口，正如其名，允许开发者根据需求设计并构建出与系统默认样式不同的...
Bootstrap响应式弹出式窗口表单代码是一种利用Bootstrap框架创建的多用途表单设计，它具有高度可定制性和良好的用户体验。Bootstrap是Twitter开发的一个开源前端框架，用于简化Web开发过程，提供一套完整的网格系统...
在网页开发中，自定义js弹出窗口，也被...通过查看和学习这些代码，你可以更好地理解自定义js弹出窗口的具体实现步骤和技巧。实践是掌握技术的关键，尝试根据这个指南编写自己的弹出层，将有助于巩固理解和提升技能。
**jQuery弹出模式窗口** 在Web开发中，有时我们需要在用户与页面交互时显示一个临时的对话框，例如用户登录、确认操作或显示警告信息。jQuery插件提供了一种便捷的方式来实现这种弹出模式窗口，使得用户体验更加...
弹出登录窗口通常包含两部分：登录表单和遮罩层。登录表单包括用户名和密码输入框、登录按钮等，而遮罩层则用于暗化背景，突出显示弹出窗口。 1. **创建HTML结构**： - 创建一个隐藏的登录窗口元素，如`;"></div>`...
在JavaScript（JS）中，弹出页面和弹出窗口是两种常见的用户交互方式，它们能够提供额外的信息或者增强用户体验。本文将深入探讨如何利用JS实现这两种功能。 首先，"弹出页面"通常指的是在一个新浏览器窗口中打开一...
4. **表单交互**：用户在弹出层中填写信息后，点击提交按钮，JavaScript会收集表单数据并通过Ajax请求发送到服务器。这样，页面不会刷新，保持弹出层的显示状态。 5. **服务器响应处理**：服务器验证用户信息后，...
JavaScript弹出新窗口并控制窗口移动到指定位置的方法知识点： 1. window.open()函数的使用：window.open()是JavaScript的一个内置函数，用于打开一个新的浏览器窗口或标签页。该函数一般包含三个参数：要加载的URL...
在探讨“js自动弹出窗口下来菜单效果”的知识点时，我们不仅关注JavaScript代码本身，还应当深入了解其背后的逻辑与应用场景。这段代码展示了如何利用JavaScript创建一个动态下拉菜单，并在用户选择菜单项时自动打开...
在IT领域，"弹出窗口"是一个常见的交互设计元素，广泛应用于各种软件和网页中。弹出窗口通常指的是在用户操作或系统触发时，突然出现在主界面之上，独立于当前界面的小窗口。这些窗口用于显示额外的信息、提示、警告...
本资源提供的是一款在ASP.NET平台下非常好用且可自定义外观的模态弹出窗口源码。下面将详细介绍这款源码的核心知识点以及如何在实际项目中应用。 1. **ASP.NET基础**： ASP.NET是微软开发的一个用于构建Web应用...
总结一下，.NET框架提供了各种弹出窗口供开发者使用，包括简单的`MessageBox`、文件选择对话框、颜色和字体选择器，以及自定义的表单。通过灵活运用这些窗口，开发者可以构建出具有丰富用户交互的应用程序。了解并...
在网页设计中，弹出窗口常用于显示额外的信息或执行特定的操作，如查看详情、填写表单等。在GridView中，我们可以通过绑定事件和使用特定的HTML或JavaScript代码来触发新窗口的弹出。下面，我们将详细介绍两种不同的...
本主题聚焦于使用jQuery来实现在弹出窗口中轻松切换登录与注册表单的功能，这一功能对于许多网站来说是必不可少的，因为它提供了用户友好的交互体验。 首先，我们需要创建HTML结构来表示登录和注册表单。通常，这些...
首先，jQuery 弹出窗口通常被称为模态对话框（Modal Dialog），它是一种覆盖在主页面上的浮动窗口，用户必须与该窗口交互后才能继续操作主页面。这种设计可以用于显示警告、确认信息或表单输入等场景。 实现弹出...
首先，弹出窗口在Web应用中通常用于确认操作、显示详细信息或进行表单输入等场景。在ASPx页面上，我们可以利用JavaScript库如jQuery，或者使用内置的DevExpress ASP.NET控件来实现这一目标。 1. **JavaScript 弹窗...
"漂亮的html弹出层弹出窗口"这个主题聚焦于利用jQuery技术实现美观且功能强大的弹出层，以增强网页的交互性。下面将详细介绍相关知识点。 首先，弹出层（Popup Layer）是一种常见的网页设计元素，它通常用于显示...