Heim > Artikel > Web-Frontend > jQuery erstellt bearbeitbare Tabellen (mit Code)

jQuery erstellt bearbeitbare Tabellen (mit Code)

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

Dieses Mal bringe ich Ihnen jQuery mit, um eine bearbeitbare Tabelle (mit Code) zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer bearbeitbaren Tabelle mit jQuery?

<%@ 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>

CSS-Code:

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

JQuery-Code

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

Zusammenfassung: Wissenspunkte, die durch Lernen aus diesem Beispiel erhalten werden können:
1. HTML-Aspekt
1. Die Tabelle kann den Kopf und den Körper
enthalten. 2. Der Inhalt der Kopfzeile kann im
platziert werden. 3. Tabelle{} Diese Schreibmethode wird Tag-Selektor genannt und kann die gesamte Tabelle auswählen Machen Sie Eindruck.
4.table td{} repräsentiert alle in der Tabelle enthaltenen tds.
2. In Bezug auf jquery
können 4 verschiedene Parameter in die Klammern von $() gestellt werden
1. Die Parameter werden direkt in die Funktion eingefügt, um anzuzeigen, dass die Seite geladen ist: Zum Beispiel Zeile 1 im JQuery-Code im obigen Beispiel $ (function(){})
2 Der Parameter kann ein CSS-Klassenselektor sein und wird in ein JQuery-Objekt gepackt. Zum Beispiel: Zeile 4 des JQuery-Codes im obigen Beispiel $("tbody tr:even")
3 Wenn der Parameter HTML-Text ist, können Sie einen Dom-Knoten erstellen und ihn in ein JQuery-Objekt packen. Zum Beispiel: Zeile 27 des JQuery-Codes im obigen Beispiel $("")
4 Der Parameter kann ein Dom-Objekt sein mit einem jquery-Objekt. Zeile 11 des JQuery-Codes im obigen Beispiel var tdObj = $(this)
Das JQuery-Objekt in diesem Beispiel
1 Fügen Sie CSS-Attribute nach dem JQuery-Objekt hinzu, um die CSS-Attribute des Knotens festzulegen. Beispielsweise enthält Zeile 4 im JQuery-Code im obigen Beispiel $("tbody tr:even").css("background-color", "#ece9d8"); den entsprechenden Selektor DOM-Knoten, als Array gespeichert.
3. Fügen Sie die HTML-Methode nach dem JQuery-Objekt hinzu, um den HTML-Inhalt des Knotens festzulegen oder abzurufen. Zeile 17 des JQuery-Codes im obigen Beispiel lautet beispielsweise var text = tdObj.html()
4. Durch Hinzufügen der val-Methode nach dem JQuery-Objekt kann der Wert des Knotens abgerufen oder festgelegt werden. Im obigen Beispiel kann beispielsweise Zeile 41 des JQuery-Codes var inputtext = $(this).val()
5 durch Hinzufügen der Breitenmethode nach dem JQuery-Objekt festgelegt oder abgerufen werden. Im obigen Beispiel kann beispielsweise Zeile 27 des JQuery-Codes tdObj.width()
6 durch Hinzufügen der appendTo-Methode nach dem JQuery-Objekt einen Knoten an alle untergeordneten Knoten eines anderen Knotens anhängen. Im obigen Beispiel kann beispielsweise Zeile 27 appendTo(tdObj) im JQuery-Code
7 das Eintreten der Trigger-Methode nach dem JQuery-Objekt auslösen. Im obigen Beispiel kann beispielsweise Zeile 29 des JQuery-Codes inputObj.trigger("focus").trigger("select")
8 durch Hinzufügen der Kindermethode nach dem JQuery-Objekt die untergeordneten Knoten eines bestimmten Objekts erhalten Knoten und Parameter können so eingestellt werden, dass sie den Inhalt des untergeordneten Knotens begrenzen. Zum Beispiel Zeile 13 des JQuery-Codes im obigen Beispiel tdObj.children("input").length
9 Wenn das vom Selektor zurückgegebene JQuery-Objekt mehrere Dom-Knoten enthält, registrieren Sie ein ähnliches Klickereignis für dieses Objekt. Für dieses Ereignis werden alle Dom-Knoten verwendet. Im obigen Beispiel gibt es beispielsweise Zeile 9 numId.click im JQuery-Code.

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere interessante Informationen finden Sie hier Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung des Unterschieds zwischen JSON.parse() und JSON.stringify() und wie man ihn verwendet

JS implementiert JSON .stringify Schritte, detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonjQuery erstellt bearbeitbare Tabellen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

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：Jquery verwaltet Tabellenspalten und sortiert TabellenNächster Artikel：Jquery verwaltet Tabellenspalten und sortiert Tabellen

In Verbindung stehende Artikel

Mehr sehen