suchen

Heim  >  Artikel  >  Web-Frontend  >  Basierend auf jQuery, einer Tabelle, die den Zeileninkrementeffekt durch Klicken auf die letzte row_jquery realisiert

Basierend auf jQuery, einer Tabelle, die den Zeileninkrementeffekt durch Klicken auf die letzte row_jquery realisiert

WBOY
WBOYOriginal
2016-05-16 15:20:341660Durchsuche

Heutzutage strebt alles nach Effizienz und Menschlichkeit. Dasselbe gilt natürlich auch für Webseiteneffekte. Wenn eine Tabelle bearbeitet werden kann, kann beim Bearbeiten bis zur letzten Zeile automatisch eine Zeile hinzugefügt werden Um Ihnen ein wenig Ärger zu ersparen, möchte ich Ihnen unten einen Teil dieses Codes mitteilen.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
table 
{
width:800px;
margin:50px auto;
border-collapse:collapse;
border-spacing:0;
}
table tr, table th, table td 
{
border:1px solid #ddd;
font-size:12px;
}
table tr td:first-child 
{
width:30px;
text-align:center;
}
table td input 
{
width:100%;
height:100%;
padding:5px 0;
border:0 none;
}
table td input:focus 
{
box-shadow:1px 1px 3px #ddd inset;
outline:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
var target = e.target,
oTr = $(target).closest('tr');
if(oTr.index() == oTable.find('tr').last().index())
{
iNum++;
eEle = oTr.clone();
eEle.find('td').eq(0).text(iNum);
}
oTable.append(eEle);
});
});
</script>[/size]
[size=2]</head>
<body>
<table id="count">
<tr>
<th>序号</th>
<th>姓名</th>
<th>金额[USD]</th>
<th>时间</th>
<th>项目</th>
<th>单位</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
</body>
</html>

Der obige Code erfüllt unsere Anforderungen. Klicken Sie auf die letzte Zeile der Tabelle, um automatisch eine neue Zeile hinzuzufügen. Das Folgende ist eine Einführung in den Implementierungsprozess.

1. Codekommentare:

1.$(function(){}), wenn die Dokumentstruktur vollständig geladen ist, führen Sie den Code in der Funktion aus.
2.var oTable = $("#count"), holen Sie sich das Objekt, dessen ID-Attributwert count ist, das hier das Tabellenobjekt ist.
3. iNum = 1, eine Variable deklarieren und den Anfangswert 1 zuweisen. In Zukunft wird 1 als Zeilennummer für jede weitere Zeile verwendet.
4.eEle = '', deklarieren Sie eine Variable zum Speichern des Zeilenobjekts.
5.oTable.on('click', function(e){}), registrieren Sie die Klickereignisverarbeitungsfunktion für das Tabellenobjekt.
6.var target = e.target, holen Sie sich das angeklickte Quellobjekt.
7.oTr = $(target).closest('tr'), holen Sie sich das nächste T-Vorfahrenelement.
8.f(oTr.index()==oTable.find('tr').last().index()), bestimmen Sie, ob die angeklickte Zeile die letzte Zeile ist.
9.iNum, der Wert von iNum wird um 1 erhöht.
10.eEle = oTr.clone(), klonen Sie das aktuelle Zeilenobjekt.
11.eEle.find('td').eq(0).text(iNum), legen Sie den Wert der ersten Zelle der letzten Zeile fest.
12.oTable.append(eEle), Zeilen am Ende der Tabelle hinzufügen.

Ich möchte den gesamten Inhalt der Tabelle mit jQuery einführen, um den Effekt der automatischen Zeilenerhöhung durch Klicken auf die letzte Zeile zu realisieren. Wenn Sie etwas nicht verstehen, können Sie darauf zurückgreifen Vielen Dank für Ihr anhaltendes Verständnis für die Unterstützung der Home-Website.

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：Beispiel für die Freigabe der Formularübermittlung im JQuery-Plug-In EasyUI_jqueryNächster Artikel：Beispiel für die Freigabe der Formularübermittlung im JQuery-Plug-In EasyUI_jquery

In Verbindung stehende Artikel

Mehr sehen