表格选中某行，并以弹出窗口修改其内容.兼容IE,firefox

最新推荐文章于 2022-05-05 23:14:28 发布
最新推荐文章于 2022-05-05 23:14:28 发布
阅读量284 收藏
点赞数
分类专栏： java 文章标签： IE Firefox
本文介绍了一个使用JavaScript实现的表格数据选择与修改功能的具体代码示例。通过点击表格行可以高亮显示选中行，并弹出一个窗口允许用户修改该行中的特定单元格数值。修改后的数据将实时更新到原表格中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<HTML>
<head>
<script language="javascript">
var curRow=null;
[color=red]function SelectRow(TrObj){
if(curRow) curRow.style.backgroundColor="#FFFFFF";
TrObj.style.backgroundColor="#FFCC00";
curRow=TrObj;
} [/color]
function CalTotalScore(){

}
function ToModify(){
var pWin=window.open("","","width=200px,height=150px,left="+(screen.width-200)/2+",top="+(screen.height-150)/2);
pWin.document.write(divOpen.innerHTML);
pWin.document.all.txtMath.value=curRow.cells[1].innerText;
pWin.document.all.txtHis.value=curRow.cells[2].innerText;
pWin.document.all.txtEng.value=curRow.cells[3].innerText;

}
</script>
</head>

<body onLoad="CalTotalScore();">
<table align="center" width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse " bordercolor="#111111">
<tr>
<td width="100" align="center">姓名</td>
<td width="100" align="center">数学</td>
<td width="100" align="center">历史</td>
<td width="100" align="center">外语</td>
<td width="100" align="center">总分</td>
</tr>
<tr onClick="SelectRow(this)">
<td align="center">张三</td>
<td align="right">78</td>
<td align="right">92</td>
<td align="right">85</td>
<td align="right"> </td>
</tr>
<tr onClick="SelectRow(this)">
<td align="center">李四</td>
<td align="right">82</td>
<td align="right">68</td>
<td align="right">91</td>
<td align="right"> </td>
</tr>
<tr>
<td align="center" colspan="5">
<input type="button" value="修改" onClick="ToModify()"> 
<input type="button" value="关闭" onClick="javascript:window.close();">
</td>
</tr>
</table>
<div id="divOpen" style="display:none ">
<script language="javascript">
function doSave(){
var opener=window.opener;
opener.curRow.cells[1].innerText=txtMath.value;
opener.curRow.cells[2].innerText=txtHis.value;
opener.curRow.cells[3].innerText=txtEng.value;
}
</script>
<table width="80%" align="center" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse " bordercolor="#111111">
<tr>
<td width="40%" align="right">数学; </td>
<td width="60%"><input type="text" id="txtMath" style="width:100% "></td>
</tr>
<tr>
<td align="right">历史; </td>
<td><input type="text" id="txtHis" style="width:100% "></td>
</tr>
<tr>
<td align="right">外语; </td>
<td><input type="text" id="txtEng" style="width:100% "></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="保存" onClick="doSave()"></td>
</tr>
</table>
</div>
</body>

</html>
javascript基础——表格操作（添加行和单元格、删除行和单元格、）、网页滚动的距离与偏移量（scroll、offset、client、getBoundingClientRect）、CSS类操作
ranran0306的博客
05-05 887
javascript基础——表格操作（添加行和单元格、删除行和单元格、）、网页滚动的距离与偏移量（scroll、offset、client、getBoundingClientRect（））、CSS类操作
弹窗拖拽+水平方向伸缩（弹框无法选中文字）
weixin_44274094的博客
09-07 727
【代码】弹窗拖拽+水平方向伸缩。
JavaScript操作表格
10-09
JavaScript操作表格JavaScript操作表格JavaScript操作表格
javascript操作表格（一）
IT 乞丐
06-19 228
本文出自优快云，内容比较全面，js操作表格是很常用的功能，分享一下。   利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。 1、inserRow()和insertCell()函数 insertRow()函数可以带参数，形式如下： insertRow...
JavaScript中操作表格
彼岸花
03-08 441
在写页面的时候，我们和表格打交道的次数比较不，下面我来介绍一下JavaScript怎样操作表格的。 (1)自动的添加行 （2）自动的添加列 （3）实现一些效果 （4）主要的思想
对表格操作的一个javascript例子
diandian82的专栏
12-12 1075
    var lastRow = new Array();        function highlightIt(el)    {        var index = null;        if (el.tagName != "TD")        {            while (el != null)            {                if ((el.c
自定义JavaScript实现动态表格添加示例（兼容除FF）
值得注意的是，为了在表格行被选中时进行操作，作者还声明了一个全局变量`selectRow`，用于后续可能的行选择处理，如在弹出窗口中对选中行的数据进行编辑或显示。 由于不兼容Firefox的特性，开发者在实际项目中使用...
【Layui表格动态列宽】：自适应内容调整的6个技巧
# 摘要 本文详细探讨了Layui表格动态列宽...最后，本文分析了Layui表格动态列宽的兼容性问题，并提供调试与性能优化策略。通过创新应用案例，展示了动态列宽在提升用户体验、数据可视化和后端服务联动方面的实践成果。
UI设计网页规范.docx
12-23
- 浏览器兼容性：设计应确保兼容Chrome、Firefox、Safari和IE8及以上主流浏览器。 2. 字体与文字规范： - 使用系统自带的常规字体，区分不同层级的文字，如一级标题、二级标题、主内容文字、次内容文字和辅助文字...
UI设计网页规范标准.docx
10-11
同时，设计需兼容Chrome、Firefox、Safari和IE8以上主流浏览器。 - **文字和图片**：使用系统默认字体，区分不同级别的标题和内容文字，使用不同字号和颜色。图片需有1px描边，未加载时显示默认图片。 2. 信息交互...
js简单表格操作
07-15
js简单表格操作，对表格进行增删改，效果可看博客： https://blog.csdn.net/qq_37902949/article/details/81056551
Javascript自动填表单
12-29
JAVA自动生成表单的网页特效，用Javascript自动生成的各种表单特效代码，自动生成表单的网页特效
javascript实现自动填写表单实例简析
11-23
本文实例讲述了javascript实现自动填写表单的方法。分享给大家供大家参考，具体如下： 在平时开发过程中，或者在访问某些站点，经常要频繁地填写一大堆表单时，我们可以利用javascript，写一段脚本，预先把要填的信息准备好，然后模拟点击按钮的动作，自动提交表单，轻松且高效。 步骤 1. 找到页面中对应的form，把form中所需的html控件列出来，如 <form name="customersForm" id="myform" method="POST" action="insert.php"> 姓 : <input type="text" name="this
javascript 自动填写表单的实现方法
01-19
本文没有什么技术上创新，只要会一点Javascript的技术就可以写了。 第一步： 在页面查看源代码，把Form中包含的需要填列的HTML控件找出来如： <form name=”mainfrm” action=”” method=”post”> <input type=”text” name=”username”/> <input type=”submit” value=”submit”/> </form> 第二步：编写代码 [removed]mainfrm.username.value=”stangray”;mainfrm.submit.focus(); 第三步： 打开浏览器的“收藏夹”
JS存储用户填写表单信息，刷新自动填充
12-11
Sisyphus.js 是一个利用 HTML5 技术实现的自动保存草稿插件，它能将表单数据自动保存到 LocalStorage 中。当浏览器崩溃后，只要重新打开浏览器就能恢复数据。它也是一个轻量级的 jQuery 插件，使用也非常简单，可以设置每隔一段时间或者是数据有变化时自动...
javascript表格操作的快捷方法
MIss-Y的博客
03-31 2108
一、表格的组成- 表格式html中最复杂的标签之一，它的层次关系为table>thead/tbody/tfoot>tr>td,我们当然可以根据每一个标签创建一个javascript对象，然后将对象根据这个层次结构添加到父级结构中去，但是这样的操作很麻烦，javascript专门提供了操作表格的相关属性个方法。 二、javascript操作表格的属性和方法 1、元素所对应的属性和方法    
js操作表格相关
Alienkp的博客
05-05 746
js对表格操作(增删查)提供了一些非常好用的方法 使用之前需要先获取表格的节点例如: var tab = document.querySelector("table"); 对表格添加元素 var 新添加的行=表格节点.insertRow();添加行 新添加的行.insertCell(); 行里添加列 对表格删除元素 表格元素.deleteRow(参数); 删除指定行 参数:tr的索引 需...
javascript 自动填写表单
weixin_30578677的博客
04-09 948
在访问某些站点时，常常发现要填写一些没有实际意义但又必须得重复填写的表单，而且现在B/S的应用越来越多，下面的方法也许可以让你轻松点。 本文没有什么技术上创新，只要会一点Javascript的技术就可以写了。第一步： 在页面查看源代码，把Form中包含的需要填列的HTML控件找出来如：<form name="mainfrm" acti...
javascript网页自动填表_JavaScript引擎——小白使用指南
weixin_32191051的博客
12-30 423
首先，先介绍一些术语。JavaScript通常被称为虚拟机。虚拟机是指在既定的计算机系统中运用软件模拟的具有完整硬件系统功能的计算机系统。根据虚拟机的模拟以及代替现实计算机的精确度，它们被分为了很多种类型。举个例子，虚拟机系统就是要提供一个可以让操作系统执行的完全仿真的平台。苹果用户对Parallels就很熟悉，这是一个能让你在苹果电脑上运行Windows的虚拟机系统。另一方面，流程虚拟机的功能性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值