JQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann-js-Tutorial-php.cn

JQuery implementiert eine Tabellenfunktion, die in Echtzeit bearbeitet werden kann

php中世界最好的语言

Freigeben： 2018-04-24 14:20:20

Original

2193 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 
 }

Nach dem Login kopieren

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); 
 } 
 }); 
 }); 
});

Nach dem Login kopieren

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!