Maison > Article > interface Web > jQuery crée des tables modifiables (avec code)

jQuery crée des tables modifiables (avec code)

php中世界最好的语言original: 2018-04-25 10:20:031334parcourir

Cette fois je vais vous proposer jQuery pour créer une table modifiable (avec code). Quelles sont les précautions pour créer une table modifiable avec jQuery Voici un cas pratique, jetons un oeil.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>jq2—可以编辑的表格</title> 
<link href="css/editTable.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/editTable.js"></script> 
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%> 
</head> 
<body> 
<form id="form1" runat="server"> 
<p> 
<table> 
<thead> 
<tr> 
<th colspan="2">鼠标点击表格项就可以编辑</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>学号</th> 
<th>姓名</th> 
</tr> 
<tr> 
<td>000001</td> 
<td>张三</td> 
</tr> 
<tr> 
<td>000002</td> 
<td>李四</td> 
</tr> 
<tr> 
<td>000003</td> 
<td>王五</td> 
</tr> 
<tr> 
<td>000004</td> 
<td>赵六</td> 
</tr> 
</tbody> 
</table> 
</p> 
</form> 
</body> 
</html>

code css :

body { 
} 
table { 
border:1px solid #000000; 
border-collapse:collapse;/*单元格边框合并*/ 
width:400px; 
} 
table td { 
border:1px solid #000000; 
width:50%; 
} 
table th { 
border:1px solid #000000; 
width:50%; 
} 
tbody th { 
background-color:#426fae; 
}

code jquery

$(function () { 
//找到表格中除了第一个tr以外的所有偶数行 
//使用even为了通过tbody tr返回所有tr元素 
$("tbody tr:even").css("background-color", "#ece9d8"); 
//找到所有的学号单元格 
var numId = $("tbody td:even"); 
//给单元格注册鼠标点击事件 
numId.click(function () { 
//找到对应当前鼠标点击的td，this对应的就是响应了click的那个td 
var tdObj = $(this); 
//判断td中是否有文本框 
if (tdObj.children("input").length>0) { 
return false; 
} 
//获取表格中的内容 
var text = tdObj.html(); 
//清空td中的内容 
tdObj.html(""); 
//创建文本框 
//去掉文本框的边框 
//设置文本框中字体与表格中的文字大小相同。 
//设置文本框的背景颜色与表格的背景颜色一样 
//是文本框的宽度和td的宽度相同 
//并将td中值放入文本框中 
//将文本框插入到td中 
var inputObj = $("<input type=&#39;text&#39;>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj); 
//文本框插入后先获得焦点、后选中 
inputObj.trigger("focus").trigger("select") 
//文本框插入后不能被触发单击事件 
inputObj.click(function () { 
return false; 
}); 
//处理文本框上回车和esc按键的操作 
inputObj.keyup(function (event) { 
//获取当前按下键盘的键值 
var keycode = event.which; 
//处理回车的情况 
if (keycode==13) { 
//获取当前文本框中的内容 
var inputtext = $(this).val(); 
//将td中的内容修改为文本框的内容 
tdObj.html(inputtext); 
} 
//处理esc的内容 
if (keycode==27) { 
//将td中的内容还原成原来的内容 
tdObj.html(text); 
} 
}); 
}); 
});

Résumé : points de connaissances qui peuvent être acquis en apprenant cet exemple :
1 , HTML
1. Le tableau peut contenir le tête et le corps
2. Le contenu de l'en-tête peut être placé dans le
3.table{} Cette méthode d'écriture est appelée sélecteur de balise , peut avoir un impact sur l’ensemble du tableau.
4.table td{} représente tous les td contenus dans le tableau.
2. En terme de jquery
4 paramètres différents peuvent être placés entre parenthèses de $()
1. Les paramètres sont directement placés en fonction, indiquant que la page est chargée : Par exemple, ligne 1 dans le code jquery de l'exemple ci-dessus $ (function(){})
2. Le paramètre peut être un sélecteur de classe CSS et est empaqueté dans un objet jquery. Par exemple : Ligne 4 du code jquery dans l'exemple ci-dessus $("tbody tr:even")
3. Si le paramètre est du texte HTML, vous pouvez créer un nœud dom et le conditionner dans un objet jquery. Par exemple : Ligne 27 du code jquery dans l'exemple ci-dessus $("")
4 Le paramètre peut être un objet dom. Cette méthode équivaut à remplacer l'objet dom. avec un objet jquery. Ligne 11 du code jquery dans l'exemple ci-dessus var tdObj = $(this)
L'objet jquery dans cet exemple
1 Ajoutez des attributs CSS après l'objet jquery pour définir les attributs CSS du nœud. Par exemple, la ligne 4 du code jquery dans l'exemple ci-dessus $("tbody tr:even").css("background-color", "#ece9d8"); Le contenu de l'objet jquery contient le sélecteur correspondant. Nœud DOM, enregistré sous forme de tableau.
3.Ajoutez la méthode html après l'objet jquery pour définir ou obtenir le contenu html du nœud. Par exemple, la ligne 17 du code jquery dans l'exemple ci-dessus est var text = tdObj.html()
4. L'ajout de la méthode val après que l'objet jquery puisse obtenir ou définir la valeur du nœud. Par exemple, dans l'exemple ci-dessus, la ligne 41 du code jquery var inputtext = $(this).val()
5 L'ajout de la méthode width après que l'objet jquery puisse définir ou obtenir la largeur d'un nœud. Par exemple, la ligne 27 du code jquery dans l'exemple ci-dessus est tdObj.width()
6. L'ajout de la méthode appendTo après que l'objet jquery peut ajouter un nœud à tous les nœuds enfants d'un autre nœud. Par exemple, dans l'exemple ci-dessus, la ligne 27 appendTo(tdObj) dans le code jquery
7. L'ajout de la méthode de déclenchement après l'objet jquery peut déclencher un événement js. Par exemple, dans l'exemple ci-dessus, la ligne 29 du code jquery inputObj.trigger("focus").trigger("select")
8 L'ajout de la méthode children après l'objet jquery peut obtenir les nœuds enfants d'un certain. nœud et les paramètres peuvent être définis pour limiter le contenu du nœud enfant. Par exemple, la ligne 13 du code jquery dans l'exemple ci-dessus tdObj.children("input").length
9 Si l'objet jquery renvoyé par le sélecteur contient plusieurs nœuds dom, enregistrez un événement de clic similaire sur cet objet, tous les nœuds dom seront utilisés pour cet événement. Par exemple, dans l'exemple ci-dessus, ligne 9 numId.click dans le code jquery

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres éléments connexes. articles sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de la différence entre JSON.parse() et JSON.stringify() et comment l'utiliser

JS implémente l'explication détaillée des étapes JSON .stringify

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php json jquery css html select Length var JS function 对象事件 dom this 选择器 background input table tbody td tr th

Déclaration：

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

Article précédent：Jquery exploite les colonnes des tableaux et trie les tableauxArticle suivant：Jquery exploite les colonnes des tableaux et trie les tableaux

Articles Liés

Voir plus