communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > js修改table中Td的值(定义td的单击事件)_javascript技巧

js修改table中Td的值(定义td的单击事件)_javascript技巧

WBOY
Libérer： 2016-05-16 17:44:08
original
1432 Les gens l'ont consulté

项目做完，在测试验收时，用户突然提出，可以更改查询结果，便于打印。隐藏工程错误。但是这个时候提要求，比较头痛，后来，想了想还是用前台代码，这样，只要在项目的JS文件中，加入以下几个函数，便可以解决了。

复制代码 代码如下:

/*
页面装载时，为每个td增加单击事件，这样，就可以不用对每个页面进行更改。
*/
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
for(var i=0;i{
for(var j=0;j{
　　/*
添加单击事件属性。此处不可使用setAttribute方法。
*/
tbmain.rows[i].cells[j].onclick=AddObjOfText;
}
}
}
/*
单击事件，将Td内容更新为一个Div，其中装载了一个Text，用于用户输入新的Td的值，
一个确定按钮，一个取消按钮，用于保存或取消用户的输入内容。
一个Hidden，保存用户输入新值前的Td的值，以便用户取消时恢复。
*/
function AddObjOfText()
{
var tdcag=document.getElementById("tdcag");
if(tdcag!=null)
{
return;
}
var tdid=window.event.srcElement;
var tdtxt=tdid.innerText;
var str="
";
str+="";
str+="";
str+="";
str+="
";
tdid.innerHTML=str;
}
/*
取消更改，把Hidden值赋给Td
*/
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value;
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=tdtxt;
}
/*
保存用户更改，把Text值赋值给Td
*/
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=txtId.value;
}

这样，在页面的中，添加onload事件，其值赋为：ReWritable()，如下：
复制代码 代码如下:


















11
12
13
21
22
23
31
32
33



这样，每个Td中，便添加了一个单击事件。
Étiquettes associées：
table événement de clic
source：php.cn
Article précédent：jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)_jquery Article suivant：js修改table中Td的值(定义td的双击事件)_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Récupérer les valeurs associées imbriquées dans MySQL J'essaie de récupérer des valeurs associées en fonction de plusieurs entrées dans une base...
Depuis 2024-04-04 17:29:06
0
2
365
Comment écouter des événements de clic spécifiques mais en supprimer d'autres ? Mon application Web contient un tableau HTML dans lequel chaque ligne renvoie à une URL sp...
Depuis 2024-04-04 16:55:27
0
1
317
Titre du tableau pivoté verticalement, centré + aligné en bas, multi-navigateur J'ai un tableau avec des en-têtes pivotés qui ressemble à prévu dans Chrome, mais pas dans...
Depuis 2024-04-04 16:45:25
0
1
330
Tableau avec en-tête fixe et en-têtes de colonnes pivotés J'ai un tableau avec un en-tête fixe et une première colonne fixe. Je souhaite également f...
Depuis 2024-04-03 08:50:32
0
1
362
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal