Heim Web-Frontend js-Tutorial Supereinfache JQuery-Methode zum Betreiben von tables_jquery

Supereinfache JQuery-Methode zum Betreiben von tables_jquery

May 16, 2016 pm 04:26 PM
jquery 操作 方法 表格

Das Beispiel in diesem Artikel beschreibt die supereinfache JQuery-Tabellenoperationsmethode. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Verwenden Sie jquery, um eine Zeile hinzuzufügen und eine Zeile zur angegebenen Tabelle zu löschen

Code kopieren Der Code lautet wie folgt:
<script language="javascript" src="./jquery. js"> ;</script>
<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellpacing="0" width="20%">
<tr id="1"><td width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td></tr>
<tr id="2"><td width="30%">11</td>
<td width="30%">22</td>
<td width="30%">33</td></tr>
</table>
<table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellpacing="0" width="20%">< td width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td>
</tr>
</table>
<input type="button" name="button" value="add" onclick="addtr('test');">
<input type="button" name="button" value="del" onclick="deltr('test');">
<script> //Fügen Sie am Ende der Tabelle eine Zeile mit der ID test hinzu
function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");
tr_id; //alert(tr_id);
str = "<tr id = '" tr_id "'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";
$('#' id).append(str); } //Löschen Sie die letzte Zeile der Tabelle mit id test
function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#' tr_id).remove();
}
</script>


jQuery fügt Tabellenzeilen und -spalten dynamisch hinzu und löscht sie
Code kopieren Der Code lautet wie folgt:
<!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">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css"> .cl1{ Hintergrundfarbe:#FFFFFF; } .cl2{ Hintergrundfarbe:#FFFF99; } </style>
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var rowCount = 0;
var colCount = 2; 
Funktion addRow(){ rowCount ; var rowTemplate = '<tr class="tr_' rowCount '"><td>' rowCount '</td><td class="cl1">内容' rowCount '</td><td class="cl1"><a href="#" onclick=delRow(' rowCount ')>删除</a></td></tr>';
var tableHtml = $("#testTable tbody").html();
tableHtml = rowTemplate; $("#testTable tbody").html(tableHtml); }
  function delRow(_id){ $("#testTable .tr_" _id).hide(); rowCount--; } 
Funktion addCol(){ colCount ; $("#testTable tr").each(function(){ 
var trHtml = $(this).html(); trHtml = '<td onclick="delCol(' colCount ')">增加的td</td>';
$(this).html(trHtml);
}); 

function delCol(_id){   $("#testTable tr").each(function(){ $("td:eq(" _id ")",this).hide(); });
colCount--;

function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl1");
$("td:eq(" _id ")",this).addClass("cl2"); }); } 
function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl2");
$("td:eq(" _id ")",this).addClass("cl1"); }); } </script>
<title>jquery操作表格测试</title>
</head>
<body>
<table id="testTable" border="1" width="500"> <tr>
<td>序号</td> <td onmouseover="mover(1);" onmouseout="mout(1);">内容</td>
<td onmouseover="mover(2);" onmouseout="mout(2);">操作</td> </tr>
</table>
<input type="button" value="添加行" onclick="addRow();"/>
<input type="button" value="添加列" onclick="addCol();"/>
</body>

jquery操作表格(添加/删除行、添加/删除列)

复制代码 代码如下:
<!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">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<title>jquery操作表格测试</title>
<script type="text/javascript">
Funktion del(_id){ $("#testTable .tr_" _id).html('');
var tableTr = $("#testTable .tr_" _id).hide(); }
Funktion addRow(){ var addRowTemplete = '<tr class="tr_' tableCount '">
<td class="cl1">' tableCount '</td><td class="cl1">内容' tableCount '</td>
<td class="cl1"><a href="javascript:void(0)" onclick=del(' tableCount ');>删除</a></td></tr> '; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){    var trHtml = "<td onclick='delCol(" colCount ")'>曾加的td</td>"; $(this).append(trHtml }); } function delCol(_id){ $("#testTable tr").each(function(){    $("td:eq(" _id ")",this).hide(); }); }
</script> </head>
<body>
<table width="487" border="1" id="testTable"> <tr> <td onclick="delCol(0)">序号</td> <td onclick="delCol(1)">内容</td> <td onclick="delCol(2)">操作</td> </tr> </table> <p> <input type="button" name="Submit" value="添加行" onclick="addRow()" /> <input type="button" name="Submit2" value="添加列" onclick="addCol()"/> </p> </body>
</html>

复制代码 代码如下:
<!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">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Offizielle Website von My One Percent Damenbekleidungsgeschäft|Baicaiyuan Community|4000-921001|Just Love One Percent</title>
<meta name="keywords" content="Mein ein Prozent, mein ein Prozent Damenbekleidungsgeschäft, mein ein Prozent Einkaufszentrum, mein ein Prozent Taobao" />
<meta name="description" content="Mein Ein-Prozent-Damenbekleidungsgeschäft Taobao Sanjinguan, offizielle Website 100f1.com, nur ein Prozent geschmackvolle Schönheiten! Mein Ein-Prozent-Einkaufszentrum bringt jeden Monat neue Mode heraus. Damenbekleidung und trendige Kleidung für Frauen. " />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<div id="wrap" class="wrap">
<div class="fatie" id="fatie">
<dl class="options">
<dd>Optionen<span>1</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>
<dd>Optionen<span>2</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>
<dd>Optionen<span>3</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>
<dd>Optionen<span>4</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>
<dd>Optionen<span>5</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>
</dl>
<p class="add_opt">
<span class="base_icon">Weitere Optionen hinzufügen</span>
</p>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){//Abstimmungsoption zur Erhöhung oder Verringerung der Kontrolle
var fatie = $("#fatie");
var option = fatie.find(".options dd");
Funktion list_again(){//Options reorder
option.each(function(){
var i = $(this).index();
$(this).find("span").html(i 1);
})
}
fatie.find(".add_opt span").click(function(){//Option hinzufügen
fatie.find(".options").append('<dd>Options<span>i</span>:<input type="text" class="text" /><a class=" base_icon " href="javascript:void(0);">Delete</a></dd>');
option = fatie.find(".options dd");
list_again();
})
option.find("a").live("click",function(){//Option löschen
$(this).parent().remove();
list_again();
})
})
</script>
</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Erklärung dieser Website
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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schritte zum Anpassen des Formats von Bildern, die in PPT-Tabellen eingefügt werden Schritte zum Anpassen des Formats von Bildern, die in PPT-Tabellen eingefügt werden Mar 26, 2024 pm 04:16 PM

Schritte zum Anpassen des Formats von Bildern, die in PPT-Tabellen eingefügt werden

So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App Mar 28, 2024 pm 12:50 PM

So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App

So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) May 01, 2024 pm 12:01 PM

So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen)

Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys! Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys! Mar 23, 2024 am 10:42 AM

Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys!

So legen Sie den WPS-Wert fest, um die Farbe entsprechend den Bedingungen automatisch zu ändern. Schritte zum Festlegen des WPS-Tabellenwerts, um die Farbe entsprechend den Bedingungen automatisch zu ändern So legen Sie den WPS-Wert fest, um die Farbe entsprechend den Bedingungen automatisch zu ändern. Schritte zum Festlegen des WPS-Tabellenwerts, um die Farbe entsprechend den Bedingungen automatisch zu ändern Mar 27, 2024 pm 07:30 PM

So legen Sie den WPS-Wert fest, um die Farbe entsprechend den Bedingungen automatisch zu ändern. Schritte zum Festlegen des WPS-Tabellenwerts, um die Farbe entsprechend den Bedingungen automatisch zu ändern

Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) May 04, 2024 pm 06:01 PM

Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten)

So stellen Sie die Schriftgröße auf dem Mobiltelefon ein (Schriftgröße auf dem Mobiltelefon einfach anpassen) So stellen Sie die Schriftgröße auf dem Mobiltelefon ein (Schriftgröße auf dem Mobiltelefon einfach anpassen) May 07, 2024 pm 03:34 PM

So stellen Sie die Schriftgröße auf dem Mobiltelefon ein (Schriftgröße auf dem Mobiltelefon einfach anpassen)

Der Unterschied zwischen Methoden und Funktionen der Go-Sprache und Analyse von Anwendungsszenarien Der Unterschied zwischen Methoden und Funktionen der Go-Sprache und Analyse von Anwendungsszenarien Apr 04, 2024 am 09:24 AM

Der Unterschied zwischen Methoden und Funktionen der Go-Sprache und Analyse von Anwendungsszenarien

See all articles