<html>
<script language="javascript">
//为每个Td添加双击事件
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
//循环，为每行每列添加双击事件，但是，第一行（thead）与最后一行（tfoot）不添加。
for(var i=1;i<tbmain.rows.length-1;i++)
{
for(var j=1;j<tbmain.rows[i].cells.length;j++)//第一列不添加
{
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
}
}
}
//定义td的双击事件，为其添加文本框，使用用户可以输入。
function TdDoubleClick()
{
getOldChange();//添加旧的数据oldRecord
//首先判断是不是该方格已经存在文本框，如果存在，则返回，不重复添加文本框。如果不存在，则添加。
var tdcag=document.getElementById("tdcag");
var tdid=null;
var txtid=null;
//var curtd=window.event.srcElement;//就是指向触发事件的元素，他是什么就有什么的属性
if(tdcag!=null)//已经存在，返回。
{
return;
}
//不存在，则添加
tdid=window.event.srcElement;//就是指向触发事件的元素，他是什么就有什么的属性
tdtxt=tdid.innerText;
tdtxt=Trim(tdtxt);
var str="<div id='tdcag'><input type='text' onblur='ChangeTdText();' id='txtId' value='"+tdtxt+"'>";
str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>";
str+="</div>";
tdid.innerHTML=str;
//使文本框获得焦点。
document.getElementById("txtId").focus();
var ctr=document.getElementById("txtId").createTextRange();//
ctr.collapse(false);//将插入点移动到当前范围的开始或结尾。
ctr.select();
}
//去除字符串前后的空格。
function Trim(str)
{
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//定义KeyPress按下时的事件，如果是ESC键，则取消更改，恢复为更改前的值。
document.onkeypress = function EscKeyPress()
{
if(event.keyCode==27)
{
CancelTdChanged();
return;
}
}
//取消更改，
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value;
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(tdtxt);
getNewChange();//添加新的数据（未更改）
}
//确定更改，
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
if(txtId==null)
{
return;
}
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(txtId.value);
// alert(rowID);
getNewChange();//添加新的数据（已更改）
return;
}
var changeID=0;
var rowID;
var changeArr=new Array();
var oldRecord=new Array();
var newRecord=new Array();
function show(){
compare()
var otstr="<table border='1'>";
var ojstr="{check:[";
var ntstr="<table border='1'>";
var njstr="{check:[";
for( var i=0;i<changeArr.length;i++){
otstr+=oldRecord[i];
ojstr+=changeToJson(oldRecord[i])+",";
ntstr+=newRecord[i];
njstr+=changeToJson(newRecord[i])+",";
}
ojstr+="]}";
njstr+="]}";
otstr+="</table>";
ntstr+="</table>";
ojstr=ojstr.replace(/,]}/g,"]}");
njstr=njstr.replace(/,]}/g,"]}");
var contain=document.getElementById("div2");
contain.innerHTML=otstr+"\n"+ojstr+"\n";
var contain=document.getElementById("divnew");
contain.innerHTML=ntstr+"\n"+njstr;
}
function compare(){//去除修改的数据（又该回原值）
for( var i=0;i<changeArr.length;i++){
//alert(oldRecord[i]+"/"+newRecord[i]);
if(oldRecord[i]==newRecord[i]){
changeArr[i]="";
oldRecord[i]="";
newRecord[i]="";
}
}
}
function changeToJson(str){
if(str==undefined)
return;
str=str.replace(/<tr>/g,"{");
str=str.replace(/<\/tr>/g,"}");
str=str.replace(/<td>/g,"");
str=str.replace(/<\/td>/g,",");
str=str.replace(/,}/g,"}");
return str;
}
function getOldChange(){
var flag=true;
for( var i=0;i<changeArr.length;i++){
if(rowID==changeArr[i]){
flag=false;
}
}
if(flag==true){
changeArr[changeID]=rowID;
oldRecord[changeID]=getOneRecord(rowID);
changeID++;
}
}
function getNewChange(){
//alert(newRecord[changeID-1]+"\n"+getOneRecord(rowID));
newRecord[changeID-1]=getOneRecord(rowID);
//alert(newRecord[changeID-1]);
}
function getOneRecord(rid){
t=document.getElementById("tbmain");
row_num=t.rows.length;
cell_num=t.rows[0].cells.length;
var str=new String("");
for(var i=0;i<=row_num;i++){//
if(rid==i){
str="<tr>";
for(var j=0;j<=cell_num;j++){
str+="<td>"+t.rows[i].cells[j].innerHTML+"</td>";
}
str+="</tr>";
}
}
return str;
}
function leave(){
var msg="leave";
return msg;
}
//window.onbeforeunload=leave;
//window.onunload=leave;
</script>
<body onload="ReWritable();">
<table id="tbmain" style="width:100%;" border="1">
<thead>
<tr>
<td>thead,thead,thead</td><td>thead,thead,thead</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
tfoot,tfoot,tfoot
</td>
<td>
tfoot,tfoot,tfoot
</td>
</tr>
</tfoot>
<tr onMouseDown="rowID=this.cells.item(0).innerHTML;">
<td style="display:none">
1
</td>
<td>12</td>
<td>13</td>
</tr>
<tr onMouseDown="rowID=this.cells.item(0).innerHTML;">
<td style="display:none">
2
</td>
<td>22</td>
<td>23</td>
</tr>
<tr onMouseDown="rowID=this.cells.item(0).innerHTML;">
<td style="display:none">
3
</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<input type="button" onclick="show();" value="show"/>
<div id="div2"></div><div id="divnew"></div>
</body>
</html>
分享到：
相关推荐
在这个场景下，我们需要掌握如何利用JavaScript有效地获取table中某个td的值，以便实现动态的页面交互。 首先，了解HTML表格的基本结构至关重要。一个表格由`<table>`元素定义，其中包含多个`<tr>`（行）元素，每个...
下面我们将详细介绍如何通过 JavaScript 来获取 HTML 表格（`<table>`）中的行（`<tr>`）和列（`<td>`）的值。 #### 核心知识点解析 ### 一、HTML 结构解析 首先，让我们来分析一下给定的 HTML 代码结构： ```...
table双击td修改内容。纯手工，纯前端无后端。可以应用后端，不过需要自己修改样式。白嫖党：https://blog.csdn.net/qq_38508172/article/details/82660950
4. **更新样式**：根据计算出的新宽度，使用JavaScript动态修改td元素的CSS宽度属性，如`style.width`。 5. **边界处理**：为了保持表格的完整性，可能还需要处理相邻td的宽度，避免一个td变宽时挤压或覆盖其他td。...
本文主要介绍了如何通过JavaScript修改表格中td单元格的值，并且将原本的单击事件更改为双击事件。同时还添加了取消更改的逻辑，用户在双击某个td单元格后可以编辑其内容，并且如果用户按下ESC键则会取消更改。 ...
在JavaScript编程中，实时修改表格（Table）数据是一项常见的需求，特别是在动态网页应用中。这里我们将深入探讨如何使用JavaScript，结合Ajax和JSON技术，来实现这一功能。 首先，我们需要了解HTML表格的基本结构...
在Web开发中，表格（table）是常用的HTML元素之一，用于展示和组织数据。表格中的每个单元格（td）经常需要根据用户操作更新其内容。在JavaScript中实现单击事件处理器允许用户在单元格中进行编辑。下面是对文章所...
在网页开发中，表格（TABLE）是常用的数据展示方式，而动态更新表格中的单元格（TD）数据则是常见的交互需求。这通常涉及到JavaScript或者相关的前端框架如jQuery、Vue.js、React等。本篇文章将深入探讨如何实现这个...
在JavaScript中，我们可以利用DOM（Document Object Model）接口来操作这些元素，包括获取、修改和删除等。 1. **事件监听**： 实现拖动功能的关键在于对鼠标事件的监听。我们需要绑定`mousedown`（鼠标按下）、`...
这个js工具方法是用来手动改变td 的文字长度，适用于任何js框架和普通table。方法简单，代码也不多。但是绝对实用。
在JavaScript中，动态修改HTML表格（Table）的内容是一项常见的任务，尤其在网页交互和数据展示时。本篇文章将深入探讨如何使用JavaScript实现这一功能，包括选择表格元素、获取和设置单元格内容，以及监听事件来...
在IT行业中，开发移动应用时常会使用到框架和组件库，比如基于Vue.js的UniApp。 UniApp是一款多端统一开发框架，它允许开发者用一套代码编写应用，然后发布到iOS、Android、Web（H5）、以及各种小程序等多个平台。在...
在网页设计中，JavaScript（JS）是一种常用的客户端脚本语言，用于增强用户的交互体验和动态更新页面内容。本文将深入探讨如何使用JavaScript手动改变HTML表格（table）的宽度，并结合鼠标选中文字查询功能，为用户...
JS+CSS+DIV+Table实现C#中DataGridView控件可修改单元格的值 点击Table中的TD弹出DIV..输入值点确认就可修改TD的值
在JavaScript（JS）中，`table`, `tr`, 和 `td` 是HTML表格元素的常用标签，用于构建和操作表格。这些元素在网页设计和数据展示中占据着重要位置。在编程上下文中，我们通常使用JavaScript来动态地增删改表格内容，...
在讨论JavaScript获取table中某一列的值的方法时，首先需要了解HTML中的table元素是用来展示表格数据的常用结构。在HTML表格中，行被称为tr（table row），而单元格则被称为td（table data）。每个td都可以通过其...
文档展示了通过JavaScript函数getzts()和callback5()来动态生成表格（Table），以及表格的行（Tr）和单元格（Td）。利用DOM操作方法如insertRow()和insertCell()，可以根据条件创建新的行和列，为表格添加新的数据项...
9. 处理特殊情况：文中提到了如果需要获取特定列的值，可以修改.find("tr").children("td")中的参数，例如.eq(2)来获取第三列的单元格内容。 10. 注意事项：在使用eq()和children()等方法时，需要注意它们是用于...