<HTML>
<head>
<script language="javascript">
var curRow=null;
function SelectRow(TrObj){
if(curRow) curRow.style.backgroundColor="#FFFFFF";
TrObj.style.backgroundColor="#FFCC00";
curRow=TrObj;
}
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表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
在JavaScript编程领域，表格操作是常见的任务之一，特别是在构建数据密集型Web应用程序时。本教程主要聚焦于如何使用JavaScript进行一些经典的操作，如动态增加行、删除行、实现全选功能以及清除全部数据等。这些...
本篇内容主要介绍了使用JavaScript进行表格操作的方法，包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术，可以实现更加灵活的...
3. **表格操作**： - **创建新行**：要向表格添加行，首先需要创建一个新的`<tr>`元素，然后创建`<td>`元素并设置其内容。最后，将这些元素添加到表格的`<tbody>`标签内。 - **删除行**：通过获取行的引用（例如，...
总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...
在探讨“javascript表格操作”这一主题时，我们深入解析如何使用JavaScript来动态地创建、修改和操作HTML表格。以下是从给定的代码片段中提取的关键知识点： ### 动态插入行与删除行 #### 插入行：`insertRow()` -...
在JavaScript的世界里，表格操作是网页交互中常见且重要的任务，尤其在数据展示和管理时。本主题将深入探讨如何实现“Javascript高级表格操作”，包括动态创建表格、间隔行颜色、鼠标悬停高亮、编辑与删除功能、选择...
除了表格操作，"window窗体居中"也是前端开发中的一个常见需求。实现窗口居中，可以分为两种情况：一是页面加载时即居中，二是窗口大小改变时实时居中。对于前者，可以在CSS中设置窗口的`margin`属性： ```css body...
总结起来，这个JavaScript表格排序示例展示了如何通过监听表头点击事件，使用纯JavaScript实现表格数据的动态排序。它依赖于HTML表格结构，通过JavaScript操作DOM节点进行数据比较和位置交换。在实际项目中，可以...
在网页中，我们经常需要对表格进行各种操作，比如根据数据的变化改变表格的样式，例如换色，来提高用户的视觉体验或者突出重要的信息。这篇博文"JavaScript控制表格换色"将探讨如何使用JavaScript实现这一功能。 ...
1. **DOM操作**：在JavaScript中，Document Object Model（DOM）是网页内容的结构化表示，通过DOM我们可以对表格进行添加、删除、修改单元格或行等操作。例如，`document.getElementById()`、`document....
总结，通过JavaScript实现表格自动排序，关键在于理解HTML表格结构，掌握JavaScript DOM操作，编写比较函数以及添加事件监听器。在实际项目中，还需要考虑兼容性、性能优化以及用户交互体验等方面的问题。以上所述仅...
在JavaScript中，表格操作是网页动态交互的重要组成部分。本文将详细介绍如何使用JavaScript来操作HTML表格，包括创建、删除表格行和单元格以及设置属性。 1. **插入行和单元格** - `insertRow()`函数用于在表格...
在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`...
这个文档示例提供了一个简单的表格编辑器，允许用户通过按钮执行常见的表格操作，如添加、删除行和单元格，以及移动单元格。以下是关于JavaScript操作表格的一些关键知识点： 1. **DOM操作**：JavaScript通过...
在JavaScript编程中，表格是一种常见的数据展示方式，用于呈现结构化的信息。在“Javascript表格高级...记住，实践是检验理论的最好方式，所以动手尝试这些操作，将有助于加深理解和掌握JavaScript表格操作的核心概念。
JavaScript表格技术在网页开发中扮演着重要角色，尤其是在数据展示和操作方面。标题"javascript 表格列可以拖"指的是JavaScript实现的一种功能，允许用户通过拖动来调整表格列的宽度，以适应不同数据量和用户偏好。...
要实现对表格的增删查改，我们需要在JavaScript中操作这些元素。 **增加（Add）**: 在表格中添加新行，可以创建一个新的`<tr>`元素，并为其填充`<td>`元素，然后将其插入到表格的适当位置。例如，我们可以使用`...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
6. **兼容性问题**：虽然现代浏览器对JavaScript的支持非常好，但仍然需要注意老版本浏览器的兼容性问题。可以使用`classList`、`dataset`等特性检测，如果浏览器不支持，可以使用polyfill库或者退回到旧的DOM操作...