Heim > Artikel > Web-Frontend > JQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann

JQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann

php中世界最好的语言Original: 2018-04-24 14:20:202139Durchsuche

Dieses Mal bringe ich Ihnen JQuery zum Implementieren der Tabellenfunktion, die in Echtzeit bearbeitet werden kann. Was sind die Vorsichtsmaßnahmen für JQuery, um die Tabellenfunktion zu implementieren, die in Echtzeit bearbeitet werden kann ist ein praktischer Fall, werfen wir einen Blick darauf. Der endgültige Effekt, den wir erreichen möchten, ist wie folgt:

Wenn Sie auf die Spalte mit der Schülernummer klicken, können Sie sie bearbeiten:

Wenn Sie auf ESC klicken, wird der Vorgang abgebrochen. Wenn Sie auf die Eingabetaste klicken, wird die Änderung wirksam (keine Interaktion mit dem Hintergrund)
Der Seitencode lautet wie folgt (asp.net):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <link href="css/eidtTable.css" rel="stylesheet" type="text/css" /> 
 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
 <script src="js/eidtTable.js" type="text/javascript"></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 class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 <tr> 
  <td class="editTd">00001</td> 
  <td>小明</td> 
 </tr> 
 </tbody> 
 </table> 
 </p> 
 </form> 
</body> 
</html>

CSS (eidtTable.css)

table 
{ 
 border:1px solid black; 
 border-collapse:collapse; 
 width:500px; 
 } 
table th 
{ 
 border:1px solid black; 
 width:50%; 
 } 
table td 
{ 
 border:1px solid black; 
 width:50px; 
 } 
tbody th 
{ 
 background-color:#A3BAE9 
 }

JS(eidtTable.js):

/// <reference path="jquery-1.9.1.min.js" /> 
 
//$(document).ready(function () { 
// alert('test'); 
//}); 
 
//简便的写法 
$(function () { 
 $("tr:odd").css("background-color", "#ECE9D8"); 
 var objTd = $(".editTd"); 
 
 objTd.click(function () { 
 var text = $(this).html(); 
 var objThisTd = $(this); 
 
 //解决点击文本框和td中间的空隙还是会出问题 这个问题 
 if (objThisTd.children("input").length > 0) { 
 return false; 
 } 
 
 var inputText = $("<input value=&#39;test&#39; type=&#39;text&#39;/>"); 
 
 inputText.width(objTd.width()).css("font-size", "16px").css("background-color", objTd.css("background-color")).css("border-width", "0").val(text); 
 
 objThisTd.html(""); 
 inputText.appendTo(objThisTd); 
 
 inputText.trigger("focus").trigger("select"); 
 
 inputText.click(function () { 
 return false; 
 }); 
 
 //这里采用的keydown事件，我试过用keyup事件无法屏蔽浏览器的回车页面提交事件 
 inputText.keydown(function (event) { 
 //alert(event.keyCode); 
 var keycode = event.which; 
 if (keycode == 13) { 
 objThisTd.html($(this).val()); 
 //return false; 
 } 
 if (keycode == 27) { 
 objThisTd.html(text); 
 } 
 }); 
 }); 
});

Ich glaube, dass Sie die Methode nach dem Lesen beherrschen Der Fall in diesem Artikel ist für weitere spannende Informationen interessant. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung, wie jquery mit Daten in Tabellen arbeitet

Detaillierte Erklärung der von die Tabellensortierkomponente Tablesorter

Das obige ist der detaillierte Inhalt vonJQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php asp.net jquery css .net JS table

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Schritte zur Verwendung der Tabellensortierkomponente TablesorterNächster Artikel：Ausführliche Erläuterung der Schritte zur Verwendung der Tabellensortierkomponente Tablesorter

In Verbindung stehende Artikel

Mehr sehen